web-dev-qa-db-ja.com

コンポーネントのルートパラメータを取得する

私はAngular-6プロジェクトに取り組んでいます。私のアプリケーションには多くの子ルートがあります。それらの1つは次のとおりです。

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

innovation-track-id値をScrumBoardComponentのURLから取得したい。

私は以下を行うことでこれを得ることができることを知っています：

 constructor(private _route: ActivatedRoute) { }

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

しかし、どのコンポーネントでもinnovation-track-id値をフェッチしたいのですが、それが子か親かは関係ありません。つまり、次のことはしたくないのです。

this._route.snapshot.parent.paramMap

代わりに、私は次のようにしたいです：

 this._route.params.<any parameter name>
angulartypescriptangular-routingangular-router
5
Kalpesh Shingala

サービスを作成します（RouteParamsServiceと呼びましょう）：

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

親コンポーネントで、paramsをサブスクライブします。

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

これで、任意のコンポーネントでサービスをサブスクライブでき、パラメーターの値を取得します。親コンポーネントはすべての値の変更を処理し、サービスは、サブスクライブしたすべてのコンポーネントに変更を伝播します。

4
trichetriche

使用する Activated Route。 params配列のインデックスとして、任意のパラメーター名を使用できます。

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

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