Angular 2 v3路由器 - 如何在子路由中获取父路由参数

Question

我的路由定义为/ abc /:id/xyz

其中abc /:id解析为ComponentA,而/ xyz是路由器插座中显示的子组件(ComponentB)

当导航到/ abc /:id/xyz时,当我在ComponentA中执行this.route.params.subscribe(...)(其中route是ActivatedRoute)时,我看到:id.在ComponentB中做同样的事情我没有看到:id.我猜ActivatedRoute正在使用url段.

无论如何要获得路线中的所有参数？

Answer 1

未经测试,但根据Savkin的博客,将以下内容放入子节点以获取父组件的路由器参数:

constructor(activatedRoute: ActivatedRoute, router: Router) {
    const parentActivatedRoute = router.routerState.parent(activatedRoute);
    this.id = parentActivatedRoute.params.map(routeParams => routeParams.id);
}

将该代码与路由器指南中的代码进行比较,您需要id在模板中使用AsyncPipe ,或者您可以使用subscribe()...或者您可以使用,snapshot如果您确定ID值不会更改:

this.id = parentActivatedRoute.snapshot.params['id'];

@Chris在下面的评论中提到:this.router.routerState.pathFromRoot(this.route)将返回一系列激活的路由到当前路线.然后,您可以获取所有激活路线的参数.

更新:在master中RouterState.pathFromRoot(someRoute)标记为已弃用.在RC.5中,使用ActivatedRoute.pathFromRoot().

Answer 2

为了跟进Mark的答案,这似乎是在Angular 2的最终版本中有效的方法:

constructor(route: ActivatedRoute) {
  let id = route.pathFromRoot[route.pathFromRoot.length - 1].snapshot.params["id"];
}

更新:从此处直接访问父路径快照:

constructor(route: ActivatedRoute) {
  let id = route.snapshot.parent.params['id'];
}

另请参见Angular 2:从父组件获取RouteParams以获取其他选项.