Angular 6 第二个嵌套子路由不工作

Question

我正在做一个实验link。 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>

Angular 6 第二个嵌套子路由不工作

Angular 6 second nested child route not working

angular

angular-router