Angular 4中的路由-嵌套子代

Question

I am trying to implement multiple levels of nested children and was wondering if someone would be able to help. The issue I am having at the moment is that when I have a nested child route it needs to contains another <router-outlet> and therefore two screens appear on one page.

Code

app-routing

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

Now as you can see when the user hits the URL for example claim/1 then the ClaimDashboardComponent will load. I then want to be able to click on a box inside the Component which will then load the details for that claim.

The issue i seem to be having is that I have to add a <router-outlet> to the ClaimDashboardComponent so when i load the URL claim/1/details both components seem to be appearing.

I just want the ClaimDetailsComponent to load and the ClaimDashboardComponent HTML to be removed.

Answer 1

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