web-dev-qa-db-fra.com

Obtenir les paramètres de route dans le composant

Je travaille sur le projet Angular-6. J'ai plusieurs itinéraires pour mon application. L'un d'eux est comme suit: 

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

Je souhaite obtenir innovation-track-id value à partir de l'URL de mon ScrumBoardComponent .

Je sais que je peux l'obtenir en faisant ce qui suit:

 constructor(private _route: ActivatedRoute) { }

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

Mais, je veux récupérer innovation-track-id la valeur de n'importe quel composant, que ce soit un enfant ou un parent. Ce que je veux dire, c'est que je ne veux pas faire ce qui suit:

this._route.snapshot.parent.paramMap

Au lieu de cela, je veux faire quelque chose comme suit: 

 this._route.params.<any parameter name>
angulartypescriptangular-routingangular-router
2
shingala kalpesh

Créez un service (appelons-le RouteParamsService):

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

Dans votre composant parent, abonnez-vous aux paramètres suivants: 

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

Maintenant, vous pouvez vous abonner à votre service dans n'importe quel composant, et vous obtiendrez la valeur de votre paramètre. Le composant parent gérera toute modification de valeur et le service propagera la modification à tout composant qui s'y est abonné. 

4
trichetriche

Utilisez Activated Route. En tant qu'index du tableau params, vous pouvez utiliser n'importe quel nom de paramètre. 

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

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