ネストされたルートや複数のコンポーネント

Question

私は次のようになります。角度2でビューを作成しよう：

releasesと rcsは、そのリンク付きリストが含まれ、一方、三つの部分のそれぞれは、構成要素である

releases-component 
----------------- ------------- -------------- 
| releases-list | | rcs-list | | binaries- | 
| * release1 | | * rc1  | | list  | 
| release2 | | rc2  | |   | 
----------------- ------------- -------------- 

次のルートにマップする必要があります。

• releases - >リストのすべてのリリースをreleasesコンポーネントに
• releases/:id/rcs - リリースウィット用>リストのRCSをrcs成分におけるH ID
• releases/:id/rcs/:no/binariesは - >

リリース-component.html

<router-outlet></router-outlet> 
<router-outlet name="rcs"></router-outlet> 
<router-outlet name="binaries"></router-outlet> 

経路binaries成分に選びだしrcのバイナリを一覧表示

{ 
    path: 'releases', 
    component: ReleasesComponent, 
    children: [ 
    { path: '', component: ReleasesListComponent }, 
    { 
     path: ':id/rcs', 
     outlet: 'rcs', 
     component: CandidateComponent, 
     children: [ 
     { path: ':no/binaries', outlet: 'binaries', component: BinariesComponent } 
     ] 
    }, 
    ] 
} 

リリースリンク - 私はルートとリンクの定義のすべての異なる種類を試してみましたが、私はできるバイナリ

{outlets: {binaries: rc.id + '/binaries'}} 

の一覧を表示する - RCSのリストに

{outlets: {rcs: release.id + '/rcs'}} 

RCSリンクを表示しますそれを働かせないでください。この現在のソリューションバイナリは、単に表示されませんし、別のrcsのリンクをクリックした後、私は次のエラーを取得すると：

TypeError: Cannot read property 'component' of null 

Answer 1

これは途方もなく複雑に聞こえるかもしれません。しかし、それはかなり簡単です。私はあなたがこのようなあなたのルーティングを持ってお勧め：

{ path: 'releases', component: ReleaseListComponent, children: [ 
    { path: '', component: NotSelectedComponent }, 
    { path: ':id', component: ReleaseDetailsComponent, children: [ 
     { path: '', component: NotSelectedComponent }, 
     { path: 'rcs', component: RcsListComponent, children: [ 
      { path: '', component: NotSelectedComponent }, 
      { path: ':id', component: RcsDetailsComponent, children: [ 
       { path: '', component: NotSelectedComponent }, 
       { path: 'binaries', component: BinaryListComponent } 
      ] } 
     ] } 
    ] } 
] } 

は今の子供を持つ成分を有する各パスのために、あなたは<router-outlet></router-outlet>を配置する必要があります。そして、それはそれ自身の上に残りを把握するでしょう。

だから、それによって私は、次のコンポーネントが自分のテンプレート内部router-outletを持っていることを意味：

• ReleaseListComponent
• ReleaseDetailsComponent
• RcsListComponent
• RcsDetailsComponent

は、私は可能性がしたいですこれをスタイルで表示するeスクリーン。しかし、それはあまりにも多くの努力であり、私は文字通りその場合にあなたにスプーンを与えるでしょう。ここ

しかし、それはUI上でどのように見えるかです：例えば、