Angular 4 中的路由 - 嵌套子项

Question

我正在尝试实现多级嵌套子级，想知道是否有人能够提供帮助。我现在遇到的问题是，当我有一个嵌套的子路由时，它需要包含另一个 <router-outlet>，因此一页上会出现两个屏幕。

代码

应用程序路由

  { path: 'claim/:id', component: ClaimDashboardComponent, data: { breadcrumb: 'Claim' }, children: [
    { path: 'details', component: ClaimDetailsComponent, data: { breadcrumb: 'Details' } }
  ]}

现在您可以看到，当用户点击 URL 例如 claim/1 时，ClaimDashboardComponent 将加载。然后我希望能够单击组件内的一个框，然后加载该声明的详细信息。

我似乎遇到的问题是我必须向 ClaimDashboardComponent 添加 <router-outlet> 所以当我加载 URL claim/1/details 时，两个组件似乎出现。

我只想加载 ClaimDetailsComponent 并删除 ClaimDashboardComponent HTML。

Answer 1

{ path: 'claim/:id' children:[
    {path:'', component: ClaimDashboardComponent, 
                  data: { breadcrumb: 'Claim' }},
    { path: 'details', component: ClaimDetailsComponent, 
                  data: { breadcrumb:'Details' } }
  ]}

Angular 4 中的路由 - 嵌套子项

Routing in Angular 4 - Nested Children

routing

angular-routing

angular

代码