Блог

Я провожу эксперимент со следующей ссылкой. 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 Это мой код.

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

добавьте <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>