Angular4总结(二)—— 路由

  • 时间:
  • 浏览:1

在正常的情况汇报下,组件与组件之间一定是会有嵌套关系的,这人 嵌套关系就会意味大伙儿的路由插座()同样也是嵌套的。子路由而是我为了处里路由插座父子嵌套关系的

完后 的子路由完后 说是父子关系说说,那末辅助路由而是我"兄弟关系了"。

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

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

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

3.依赖注入 ProductGuard

1.修改在Routes中,product的路由信息,主要而是我加进了一一另一个多children属性:

2.而是我将resolve属性加进到守卫的规则中

3.Resolve:在路由激活完后 获取数据

而是我通过ActivatedRoute.data[0] [key] 来获取

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

多加进一一另一个多[queryParams]的属性绑定形如:

而是我将守卫的类加进到Routes中须要守卫的规则中:

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

首先上代码:

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

而是我将守卫的类加进到Routes中须要守卫的规则中:

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

一共能能分为这人 :

相当于的使用步骤:

最后在app.module.ts中加进我本人须要依赖注入的守卫类即可:

使用子路由的步骤:

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

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

最后在app.module.ts中加进我本人须要依赖注入的守卫类即可:

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

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

最后附加进本文提及到的代码,我完后 放上去github上,可供参考

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

在Routes中加进 对应参数:

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

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

页面从这人 页面情况汇报跳转到另这人 页面情况汇报,有的完后 须要一些条件,检查这人 条件而是我路由守卫的职责。

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

在进入路由完后 检测数据是就有完后 处在,以为网络请求具有延迟,完后 出先了,完后 路由到下个界面,而是我信息还那末处在的情况汇报,大伙儿就会让界面路由到错误界面完后 别的这人 界面。

https://github.com/luckypoison/Augular4Route

1.CanActivate: 处里导航到某路由的情况汇报

2.> 指定当前这人 aux路由能能展示这人 component。

相当于的使用步骤:

3.而是我在须要跳转的地方编写如下代码

路由相关的对象总结:

这人 场景出先在大伙儿在一一另一个多界面中,一一另一个多component分别被不同的路由机制管理着,完后 只使用而是我的插槽,那末办法 指定用的到底是哪这人 路由策略,而是我辅助路由就那末诞生了。

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

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

Tips:参数快照与参数订阅

完后 使用了快照,点击了第一一另一个多按钮,在点击第另一个,那末获取到的参数不必处在变化,这人 完后 大伙儿就应该使用参数订阅(观察者模式的思想,感兴趣的能能查询RXJS,进行完整性了解)。

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

相当于的使用步骤:

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

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

2.CanDeactive: 处里从当前路由遗弃的情况汇报

使用辅助路由的步骤:

4.resolve 虽然相当于对返回值的这人 增强,接受返回值的地方大伙儿应该那末写

5.ActivatedRoute:当前激活路由的相关信息,能能被这人 类记录,而是我被大伙儿使用。