Angular4总结(二)—— 路由

  • 时间:
  • 浏览:1

1.Routes:路由配置,表示在哪个URL中会显示哪个组件,还有很多在哪个RouterOutlet(像是一个多插排一样)中显示组件。

2.> 指定当前其他aux路由还可不还能能 展示哪几个component。

最后附去掉 本文提及到的代码,我有过后插进github上,可供参考

4.RouterLink:在HTML中声明路由导航用的指令。与Router相这类,只不过Router是在controller中使用的,而RouterLink在HTML中使用的。

1.修改在Routes中,product的路由信息,主要很多去掉 了一个多children属性:

1.在查询参数中传递数据

有过后使用了快照,点击了第一个多按钮,在点击第五个,那么 获取到的参数不想地处变化,其他事先大伙 就应该使用参数订阅(观察者模式的思想,感兴趣的还可不还能能 查询RXJS,进行完全了解)。

https://github.com/luckypoison/Augular4Route

至少的使用步骤:

首先大伙 先要写一个多守卫的类:

4.resolve 嘴笨 至少对返回值的你你是什么增强,接受返回值的地方大伙 应该那么 写

最后在app.module.ts中去掉 自己都要依赖注入的守卫类即可:

有过后将守卫的类去掉 到Routes中都要守卫的规则中:

3.依赖注入 ProductGuard

1.首先大伙 定义一个多Resolve守卫的类:

至少的使用步骤:

有过后通过ActivatedRoute.data[0] [key] 来获取

首先上代码:

1.CanActivate: 外理导航到某路由的情况汇报

{path: /xxx, component: XxxComponent, outlet: aux}

一共还可不还能能 分为你你是什么:

使用辅助路由的步骤:

使用子路由的步骤:

3.有过后在都要跳转的地方编写如下代码

最后在app.module.ts中去掉 自己都要依赖注入的守卫类即可:

2.在都要子路由的html中,插上 作为插座

获取:通过ActivatedRoute.queryParams[参数的key]

至少的使用步骤:

他俩的区别就在于大伙 现在一个多多不同的按钮,跳转到的URL分别为 [routerLink]="['/products','book']",和[routerLink]="['/products','watch']",还可不还能能 看出它们那么 type的参数类型不同。

还可不还能能 把SPA(single page application)理解为是一个多视图情况汇报的集合。Angular架构下的各个视图会有过后操作的不同显示的也会各有千秋,哪几个功劳很多得归功于路由。

有过后将守卫的类去掉 到Routes中都要守卫的规则中:

2.有过后将resolve属性去掉 到守卫的规则中

2.在路由路径中传递数据

通过在Routes中定义data参数 形如:

其他场景冒出在大伙 在一个多界面中,一个多component分别被不同的路由机制管理着,有过后只使用很多的插槽,那么 法律法律依据指定用的到底是哪你你是什么路由策略,很多辅助路由就那么 诞生了。

在进入路由事先检测数据是完全都有有过后地处,以为网络请求具有延迟,有过后冒出了,有过后路由到下个界面,有过后信息还那么 地处的情况汇报,大伙 就会让界面路由到错误界面有过后别的哪几个界面。

获取:通过 ActivatedRoute.params[参数的key]

1.> 通过name 指定具体的路由插座名称

事先的子路由有过后说是父子关系话语,那么 辅助路由很多"兄弟关系了"。

多去掉 一个多[queryParams]的属性绑定形如:

3.在路由配置中传递数据

3.> 在进行导航的地方指定大伙 都要的那个路由

3.Router:在运行时指定路由的行为,通过navigate()以及navigateByURL()指定路由到哪个路由中去。

首先大伙 先要写一个多守卫的类:

2.CanDeactive: 外理从当前路由选择离开的情况汇报

页面从你你是什么页面情况汇报跳转到另你你是什么页面情况汇报,有的事先都要其他条件,检查哪几个条件很多路由守卫的职责。

在Routes中去掉 对应参数:

{path: /yyy, component: YyyComponent, outlet: aux}

在正常的情况汇报下,组件与组件之间一定是会有嵌套关系的,其他嵌套关系就会是因为分析大伙 的路由插座()同样也是嵌套的。子路由很多为了外理路由插座父子嵌套关系的

2.RouterOutlet:在HTML标记路由内的占位符指令。

Tips:参数快照与参数订阅

5.ActivatedRoute:当前激活路由的相关信息,还可不还能能 被其他类记录,有过后被大伙 使用。

3.Resolve:在路由激活事先获取数据

路由相关的对象总结: