web-dev-qa-db-ja.com

Angular2の親コンポーネントから子ルートの：idパラメーターを取得する方法

で定義されている：idパラメータを取得しようとしています

RouterModule.forRoot([
  {
    path: 'orders',
    component: ListComponent,
    children: [
      {
        path: 'view/:id',
        component: ViewComponent
      },
    ]
  }
])

listComponentから。

私はすでに試しています：

route: ActivatedRoute

route.params.subscribe(params => {
  let id = +params['id'];
})

listComponentからですが、params配列は空です。：id paramはlistComponentではなくviewComponentに属しているためだと思います

ListComponentでidパラメータを取得するにはどうすればよいですか？

angularroutes
20
Fernando Popoca Ortiz

firstChildプロパティまたはActivatedRouteを使用して、子ルートを取得できます。

route.firstChild.snapshot.params['id']
30
Günter Zöchbauer

親コンポーネント内で子のパラメーターを取得するために、ActivateRouteのfirstChildプロパティを使用しました。

route: ActivatedRoute

route.firstChild.params.subscribe(params => {
  let id = +params['id'];
});
11
Fernando Popoca Ortiz

子パラメーターを再帰的に検索しても、常に探しているパラメーターを取得することはできません。特にルートを移動するとき。

代わりに、RxJS ReplaySubjectを使用して、現在の子IDを公開できます。

新しいサービスを作成します。

@Injectable()
export class ChildIdService  {
  current$ = new ReplaySubject<number>();
}

子コンポーネントにインポートして、リプレイサブジェクトをサブスクライブします。

export class ChildComponent implements OnInit {
  constructor(private ar: ActivatedRoute, public ci: ChildIdService){}

  ngOnInit(){
    this.ar.params.map(params => +params.id).subscribe(this.ci.current$);
  }
}

親コンポーネントにサービスをインポートし、非同期パイプを使用して子の値をサブスクライブします。

<span>Mother component child ID: {{ci.current$ | async}}</span>

動作するスニペットは次のとおりです。 https://stackblitz.com/edit/angular-b8xome （ブラウザアプリのプレビューに/ child/42を追加して確認しますそれは働いています）

または、コンポーネントを兄弟として定義し、親をコンポーネントレスルートとして追加します。例： https://vsavkin.com/the-powerful-url-matching-engine-of-angular-router -775dad593b03 「同じデータを使用するコンポーネントの兄弟化」の下

3
golfadas

子ルートが1つしかない場合はroute.firstChild.params['id']を掘り続けるか、route.children[0].children[1].params['id']などを使用して、ブラケット表記を使用して複数のレベルを掘り下げて兄弟ルートにアクセスします。正しいレベルを見つけることに関しては、試行錯誤が少しあります。

0
rtn