本文介绍了
1. 子级获取父级路由的方法
2.ActivatedRoute路由属性
ActivatedRoute路由的使用
在用户使用应用程序时，Angular 的路由器能让用户从一个视图导航到另一个视图。
路由器会构建出一个 ActivatedRoute组成的树，它表示路由器的当前状态。 你可以在应用中的任何地方用 Router服务及其 routerState 属性来访问当前的 RouterState 值。下面是ActivaedRoute的一些属性：
| 属性 | 说明 |
|---|---|
| url | 路由路径的 Observable 对象，是一个由路由路径中的各个部分组成的字符串数组。 |
| data | 一个 Observable，其中包含提供给路由的 data 对象。也包含由解析守卫（resolve guard）解析而来的值。 |
| paramMap | 一个 Observable，其中包含一个由当前路由的必要参数和可选参数组成的map对象。用这个 map 可以获取来自同名参数的单一值或多重值。 |
| queryParamMap | 一个 Observable，其中包含一个对所有路由都有效的查询参数组成的map对象。 用这个 map 可以获取来自查询参数的单一值或多重值。 |
| fragment | 一个适用于所有路由的 URL 的 fragment（片段）的 Observable。 |
| outlet | 要把该路由渲染到的 [RouterOutlet] 的名字。对于无名路由，它的路由名是 primary，而不是空串。 |
| routeConfig | 用于该路由的路由配置信息，其中包含原始路径。 |
| parent | 当该路由是一个[子路由]时，表示该路由的父级 [ActivatedRoute]。 |
| firstChild | 包含该路由的子路由列表中的第一个 ActivatedRoute。 |
| children | 包含当前路由下所有已激活的子路由。 |
路由树在实际中有什么用呢？
比如现在有两个模块B是A的特性模块。A模块路由如下，现在想在子模块中获取父级路由参数
（id和userid）
{
path: ':id/:userid',
component: AComponent,
children: [
{
path: 'bg/:studentId',
loadChildren: BComponent //子（特性）模块
}
]
}
错误实例1：
this.studentId = params['studentId']; //能获取的到
this.id= params['id']; //获取不到undefined
this.userid= params['userid']; //获取不到undefined
}）；
错误实例2：我们知道当该路由是一个[子路由]时，parent表示该路由的父级
[ActivatedRoute]
this.route.parent.params.subscribe(res => { //res = res ['studentId'];
this.orgId = res['id']; //undefine
this.userid = res['userid']; //undefine
this.route.params.subscribe(params => {
this.studentId = params['studentId'];
}）
}）
正确实例：
this.route.parent.parent.params.subscribe(res => {
this.orgId = res['id'];
this.userid = res['userid'];
this.route.params.subscribe(params => {
this.studentId = params['studentId'];
}）
}）
为什么要写两个parent呢？
111111111.png
这张图告诉我们，BCompent.parent找到的是Feature Module层。但是父级路由参数在AppRoutingModule层。
网友评论