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

【问题标题】：Angular 2 v3 router - how to get parent route parameters in child routeAngular 2 v3 路由器 - 如何在子路由中获取父路由参数
【发布时间】：2016-11-25 09:31:15
【问题描述】：

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

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

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

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

【问题讨论】：

标签： angular angular2-routing

【解决方案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()。

【讨论】：

谢谢马克，我可以确认这是可行的。不幸的是，这种方法只会让您从父路由获取参数。如果没有明显地创建自己的服务，就无法从祖父母等处获得。
@Chris，我假设您可以调用 router.routerState.parent(parentActivatedRoute) 来获取祖父母激活的路由及其参数，以及类似的代码以进一步返回 - 即，创建一个循环以向上走“路由器状态”树”。
是的，但是如何获得 parentActivatedRoute？我知道你唯一可以注入的是当前的 ActivatedRoute。我没有看到指向 parentActivatedRoute 的链接。我发现你可以做this.router.routerState.pathFromRoot(this.route)。这将返回一组激活的路由到当前路由。
@Chris，如果您要问的话，我认为您不能注入父激活的路由。我相信你必须在一些激活的路由对象上使用parent() 函数。
ActivatedRoute.pathFromRoot 是一个数组，而不是一个函数。

【解决方案2】：

要跟进Mark's answer，这似乎是在 Angular 2 的最终版本中有效的方法：

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

更新：从here直接访问父路由快照：

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

有关其他选项，另请参阅 Angular 2: getting RouteParams from parent component。

【讨论】：

注意，这应该是route.pathFromRoot.length - 2 而不是-1，因为-1 会给出当前路线

【解决方案3】：

默认情况下，父路由参数不会传递给子组件，但您可以从子组件内的父路由访问它们。 @Mark Rajcok 向您指出了great post。我在下面的帖子中概述了相关部分

   @Component({
      selector: 'team',
      template: `
        Team Id: {{id | async}}
        <router-outlet></router-outlet>
      `
    })
    class TeamCmp {
      id:Observable<string>;
      constructor(r: ActivatedRoute) {
        this.id = r.params.map(r => r.id);
      }
    }

    @Component({
      selector: 'details',
      template: `
        Details for Team Id: {{teamId | async}}
      `
    })
    class DetailsCmp {
      teamId:Observable<string>;
      constructor(r: ActivatedRoute, router: Router) {
//get parent activated route. 
        const teamActivatedRoute = router.routerState.parent(r);
        this.teamId = teamActivatedRoute.params.map(r => r.id);
      }
    }

【讨论】：