Angular2の2つのコンポーネントが同じページにあります

Question

私はAngular2を調べ始めました。本当に面白いようです。

私はこのようなルートを設定したところ、私は今日、この問題につまずい：

{ 
    path: 'artists', 
    component: ArtistComponent, 
    children: [ 
     { path: ':id', component: ArtistsDetailComponent }, 
     { path: '', component: ArtistsHomeComponent }, 
    ] 
}, 

アイデアは、左のアーティストリスト（ArtistComponent）を示すことで、クリックされたとき、開かれたこの詳細ビュー（ArtistsDetailComponent）が存在します右側にあります。

ArtistsComponentのテンプレートは、/ artists /：idに移動するときに、実際には左側の記事リストと右側の詳細ビュー（このルーターコンセント）を表示します。

これらの2つのコンポーネントが互いに通信する必要があることを除いて、すべてうまくいくので、詳細ビューで変更するときはリスト内で変更する必要があります。

グーグルとき、私は変数のマッピング情報と一緒にコンポーネントセレクタを使用する必要があることを参照してください。知らない

<artist-detail [artist]="selectedArtist"></artist-detail> 

が、その後、私はルータ、アウトレットや角度を持っていないというエラーを取得しますArtistsDetailComponentビューを配置する場所...

専門家、助けてください...！ :)

Answer 1

2つの矛盾したアプローチがあります。子ルートを使用する場合は、詳細コンポーネントを<router-outlet>に埋め込むか、詳細コンポーネントを<artist-detail>として「手動」に埋め込む必要があります。それらを混在させようとしたので（子供のルートとテンプレートへの手作業の埋め込み）、ルータは子ルートコンポーネントを入れるコンセントを見つけることができないと訴えました。

子ルートをあきらめて、[]構文でparamsを渡すか、子ルートを使用すると、詳細コンポーネントはルートパラメータからIDを抽出し、詳細を収集する必要があります。詳細の収集方法は、モデルによって異なります。私はReduxでアプリケーションの状態を保持し、そこから取得します。共有サービスも使用できます。