Angular 4 惰性负载模块不适用于命名子插座

Question

我正在尝试为模块实现懒惰加载。该模块具有带有唯一出口名称的子路由。当我尝试访问路线时，这似乎不起作用。

这可以从我保存的示例中看来：https：//plnkr.co/edit/nnxaozitm00riixzemts?p=preview

您可以看到我将孩子路线设置为

  { path: 'list',    component: HeroListComponent, outlet: 'abc' },

in hero-routing.module.ts

和路由器出口：

<router-outlet name="abc"></router-outlet>

in hero.component.ts

我应该能够访问Localhost：3000/Heroes/(ABC：List(，当我本地运行时，它似乎不起作用。

注意：您可以通过下载zip文件并运行NPM安装然后npm开始。

Answer 1

儿童路由似乎与默认未固定路线无法使用。

将懒惰的已加载模块路由更改为从默认未命名路由到命名路线的重定向。

const routes: Routes = [
  { path: '',   redirectTo: 'start', pathMatch: 'full' },
  { path: 'start', component: HeroComponent,
    children: [
      { path: 'list',    component: HeroListComponent, outlet: 'abc' },
      { path: ':id', component: HeroDetailComponent }
    ]
  }
];

最终将"英雄"懒惰的模块的导航链接更改为包括命名的插座信息。确保将完整的URL指定为"/英雄/开始"，请勿将其保留给默认的"/英雄"。

<a [routerLink]="['/heroes/start',{outlets: {abc:['list']}}]"  
routerLinkActive="active">Heroes</a>