Angular 4中的路由 - 嵌套子代

Question

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

代码

应用程序的路由

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

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

我似乎遇到的问题是我必须向<router-outlet>添加ClaimDashboardComponent，因此当我加载网址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' } }
  ]}