嵌套路线和多个部件

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：