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

Question

我有一条定义为/abc/:id/xyz 的路线

其中 abc/:id 解析为 ComponentA，/xyz 是显示在路由器导出 (ComponentB) 中的子组件

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

有没有办法获取路由中的所有参数？

Answer 1

未经测试，但根据 Savkin's blog ，将以下内容放入子组件中以获取父组件的路由器参数:

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

将该代码与 Router guide 中的代码进行比较，您需要在模板中使用带有 id 的 AsyncPipe，或者您可以使用 subscribe()...或者您可以使用 snapshot 如果您确定 id 值不会改变:

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

---

@Chris 在下面的评论中提到:this.router.routerState.pathFromRoot(this.route) 将返回一组激活的路由，直至当前路由。然后就可以得到所有激活路由的参数。

更新:RouterState.pathFromRoot(someRoute) 被标记为 deprecated in master 。在 RC.5 中，使用 ActivatedRoute.pathFromRoot()。