CODEWITHSUNDEEP
angularangular-router
js guru321
js guru321

Reputation: 23

Angular 6 second nested child route not working

I am making an experiment with following link. https://angular.io/guide/router#the-sample-application

As you can see, there are several milestones to make routing. During following these milestones, I met some bugs. https://angular.io/guide/router#child-route-configuration On this step, I couldn't go ahead because second route not working.

const crisisCenterRoutes: Routes = [
  {
    path: 'crisis-center',
    component: CrisisCenterComponent,
    children: [
      {
        path: '',
        component: CrisisListComponent,
        children: [
          {
            path: ':id',
            component: CrisisDetailComponent
          },
          {
            path: '',
            component: CrisisCenterHomeComponent
          }
        ]
      }
    ]
  }
];

Second route is not working right now.

https://github.com/Js-Guru321/angular-router-sample This is my code.

Please help me!

Upvotes: 2

Views: 3914

Answers (1)

Katya Pavlenko
Katya Pavlenko

Reputation: 3383

add <router-outlet> to crisis-list.html and everything would work) Each level of nested routes needs its own router-outlet tag inside of a parent route

<ul class="crises">
  <li *ngFor="let crisis of crises$ | async" [routerLink]="['/crisis-center', crisis.id]"
    [class.selected]="crisis.id === selectedId">
      <span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
  </li>
</ul>
<router-outlet></router-outlet>

Upvotes: 3

Related Questions