Angular 4 Getting Child route param

0
votes

In my application the route is something like this :-

{ path: 'route-a', component: ComponentA, children : [

    { path: ':param-b', component: ChildComponentB, children : [

        { path: ':param-c', component: ChildComponentC }

    ]}

]},

Now in my ComponentA I am trying to subscribe to child param to get param-b 

     this.routefirstChild$ = this.route.firstChild.params.subscribe($routefirstChild => {

        console.log($routefirstChild, '$routefirstChild');

     });

Now when I navigate to example.com/route-a I am getting this.route.firstChild is null error.

But if I navigate to example.com/route-a/1234 the param is passed. Which observable to have to subscribe that doesn't trigger an error but would pass the child params when the route is activated.

3
angularangular-routing
Hm... actually you are getting what u wrote, first navigation seems have no child parameters, I see no problem here, all runs according code 'example.com/route-a' are path to componentA, and there are no child routes activated at all - Kraken
I agree, but eventually there will be child routes, how do I ensure if there is a child route that gets activated the parent gets notified about the child param? - Samosa
You are doing it right now, when u added 1234 as params it is componentB parameters, and you sad that you are notified ;) - Kraken
Only if I reload the page not when clicked via routerLink. Because the subscription has failed in the first instance when there are no child, I don't get notified once there are. - Samosa

3 Answers

1
votes

I ended up implementing the following solution :-

import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';

     this.routeEvents$ = this.router.events.subscribe(

     ( $routeEvents ) : void => {

        if ( $routeEvents instanceof NavigationEnd ) {

            if(typeof this.route.firstChild != "undefined" && this.route.firstChild){

                console.log(this.route.firstChild.snapshot.params, 'this.route.firstChild.snapshot.params');

            }

        }

     });
1
votes

You could do something like this:

function getChildMostRoute(route: ActivatedRoute) {
    let route = route.snapshot;

    // Get the current active descendent
    while (route.firstChild) {
        route = route.firstChild;
    }

    const allPathsJoined = route.pathFromRoot
        .map(s => s.url.map(u => u.path).join('/'))
        .join('/')

    return {
        path: allPathsJoined,
        params: route.queryParams,
    };
}
1
votes

Angular 9

this.activatedRoute.firstChild.paramMap.pipe(tap()).subscribe(params => {
      const id = params.get('id');
});

ActivatedRoute holds the current route (partial) only. Which means, if you are at /xyz then your ActivatedRoute will hold /xyz/:id if there is a parameter. If you are currently in a parent route and you'd like to access a parameter in the child route, you can call as above, or if you would like to use a grand child route parameter, you can use activatedRoute.firstChild.firstChild to react there and then subscribe to paramMap as shown above. Similarly, you can also go up in the routing hierarchy using activatedRoute.parent instead of firstChild.

Hope this helps!