Угловой 6-секундный вложенный дочерний маршрут не работает

Question

Я провожу эксперимент по следующей ссылке.https://angular.io/guide/router#the-sample-application

Как вы можете видеть, есть несколько этапов, по которым следует выполнять маршрутизацию.Следуя этим вехам, я столкнулся с некоторыми ошибками.https://angular.io/guide/router#child-route-configuration На этом шаге я не смог продолжить, потому что второй маршрут не работает.

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

Второй маршрут сейчас не работает.

https://github.com/Js-Guru321/angular-router-sample Это мой код.

Пожалуйста, помогите мне!

Answer 1

добавьте <router-outlet> к crisis-list.html и все будет работать) Для каждого уровня вложенных маршрутов требуется собственный тег router-outlet внутри родительского маршрута

<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>