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