43

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

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

からListComponent。

私はすでに試しました：

route: ActivatedRoute

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

fromListComponentですが、params配列は空です。これは、 param がnot:idに属しているためだと思います。ViewComponentListComponent

どうすればidパラメータを取得できListComponentますか?

4

5 に答える 5

18

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

route: ActivatedRoute

route.firstChild.params.subscribe(params => {
  let id = +params['id'];
});
于 2017-01-09T17:45:11.037 に答える
4

子パラメーターを再帰的に見つけても、探しているパラメーターが常に得られるとは限りません。特にルートを移動するとき。

代わりに、RxJSReplaySubjectを使用して現在の子 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 を追加して動作を確認します)

または、コンポーネントを兄弟として定義し、親をコンポーネントなしのルートとして追加します。 "

于 2017-09-27T09:56:05.687 に答える