嵌套路線和多個部件

Question

我嘗試創建角2的圖看起來應該像這樣的：

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

其中每個三個部分是一個組件，而releases和rcs包含一個帶有鏈接的列表應該映射到以下途徑：

• releases - >列表中的所有版本中releases組件
• releases/:id/rcs - 用於釋放機智>列表RCS在rcs成份h ID
• releases/:id/rcs/:no/binaries - >列出了binaries部件已選定rc的二進制

釋放-component.html

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

路由

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

發佈鏈接 - 顯示RCS的列表

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

RCS鏈接 - 顯示二進制文件的列表

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

我已經嘗試了所有不同類型的路線和鏈接的定義，但我可以不能讓它工作。有了這個目前的解決方案的二進制文件根本就無法顯示，點擊另一個鏈接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：