Get route parameters in component

Question

I am working on the Angular-6 project. I have many child routes for my application. One of them is as follow:

  const routes: Routes = [
  {
    path: 'innovation-track/:innovation-track-id', component: InnovationTrackComponent,
    children: [
      {
        path: 'sprint', component: ScrumBoardComponent
      }
    ]
  }
];

I want to get innovation-track-id value from URL in my ScrumBoardComponent.

I know I can get this by doing following:

 constructor(private _route: ActivatedRoute) { }

 //somewhere in method     
   this._route.snapshot.parent.paramMap

But, I want to fetch innovation-track-id value in any component, doesn't matter if it is child or parent. What I mean is I don't want to do the following:

this._route.snapshot.parent.paramMap

Instead, I want to do something as following:

 this._route.params.<any parameter name>

Answer 1

Use Activated Route. As index of the params array you can use any parameter name.

constructor(private itunes:SearchService,
    private route: ActivatedRoute) {

    this.route.params.subscribe( params => params[<any parameter name>]); 
}

Answer 2

Create a service (let's call it RouteParamsService) :

export class RouteParamsService {
  innovationTrackId = new BehaviorSubject(undefined);
}

In your parent component, subscribe to params :

constructor(private route: ActivatedRoute, private service: RouteParamsService) {
  route.params
    .subscribe(params => service.innovationTrackId
      .next(params && params['innovation-track-id'] || undefined))
}

Now you can subscribe to your service in any component, and you will get the value of your param. The parent component will handle any value change, and the service will propagate the change to any component that subscribed to it.