Angular 2 v3 router - how to get parent route parameters in child route

Question

I have a route defined as /abc/:id/xyz

Where abc/:id resolves to a ComponentA and /xyz is a child component displayed in a router-outlet (ComponentB)

When navigating to /abc/:id/xyz, when I do this.route.params.subscribe(...) (where route is an ActivatedRoute) in ComponentA i see the :id. When doing the same thing in ComponentB I do not see :id. I am guessing ActivatedRoute is using url segments.

Is there anyway to get all the parameters in the route?

Mark Rajcok · Accepted Answer · 2016-08-07T04:08:00.640

11

Untested, but according to Savkin's blog, put the following into the child to get the parent component's router parameters:

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

Comparing that code to what is in the Router guide, you will need to use the AsyncPipe with id in your template, or you can use subscribe()... or you can use snapshot if you are sure the id value won't change:

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

@Chris mentions in a comment below: this.router.routerState.pathFromRoot(this.route) will return an array of activated routes down to the current route. Then you can get the parameters of all of the activated routes.

Update: RouterState.pathFromRoot(someRoute) is marked deprecated in master. In RC.5, use ActivatedRoute.pathFromRoot().

edited Aug 07 '16 at 04:08

answered Jul 21 '16 at 17:55

Mark Rajcok

362,217
114
495
492

Thanks Mark, I can confirm this works. Unfortunately this approach will only let you get parameters from the parent route. No way to get from grandparent, etc. without obviously creating your own service. – Chris Jul 21 '16 at 18:38
@Chris, I assume you could call `router.routerState.parent(parentActivatedRoute)` to get the grandparent activated route and its parameters, and similar code to go back further -- i.e., create a loop to walk up the "router state tree". – Mark Rajcok Jul 21 '16 at 22:20
yes, but how do you get parentActivatedRoute? The only thing that I know you can inject is the current ActivatedRoute. I do not see a link to the parentActivatedRoute. What i did discover is you could do `this.router.routerState.pathFromRoot(this.route)`. This will return an array of activated routes down to the current route. – Chris Jul 23 '16 at 16:45
1

@Chris, I don't think you can inject the parent activated route, if that is what you are asking. I believe you have to use the `parent()` function on some activated route object. – Mark Rajcok Jul 27 '16 at 02:53
`ActivatedRoute.pathFromRoot` is an array, not a function. – Bogac Oct 14 '16 at 05:25

score 10 · Answer 2 · edited May 23 '17 at 12:02

10

To follow up on Mark's answer this seems to be the method that works in the final version of Angular 2:

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

Update: Direct access to parent route snapshot from here:

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

See also Angular 2: getting RouteParams from parent component for other options.

edited May 23 '17 at 12:02

Community

1
1

answered Oct 15 '16 at 17:09

Dan

2,157
21
15

Note, this should be `route.pathFromRoot.length - 2` and not `-1`, since `-1` will give the current route – Ahmed-Anas Apr 19 '17 at 18:46

Arpit Agarwal · Answer 3 · 2016-07-21T17:59:16.883

Parent route param is not passed to child by default but you can access them from parent route inside the child component. @Mark Rajcok pointed you the great post. I have outlined relevant section from that post below

   @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);
      }
    }

Angular 2 v3 router - how to get parent route parameters in child route

3 Answers3