Angular 4 延迟加载模块不适用于命名的子插座答案

【问题标题】：Angular 4 lazy load module doesn't work with named child outletAngular 4 延迟加载模块不适用于命名的子插座
【发布时间】：2017-06-08 19:05:08
【问题描述】：

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

从我保存的这个例子中可以看出：https://plnkr.co/edit/NNXAoZItM00RIIxzemts?p=preview

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

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

在 hero-routing.module.ts

和路由器出口到：

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

在 hero.component.ts

当我在本地运行它时，我应该能够访问 localhost:3000/heroes/(abc:list)，但它似乎不起作用。

注意：您可以通过下载 zip 文件并运行 npm install 然后 npm start 在本地运行 plunker 示例。

【问题讨论】：

标签： javascript angular angular2-routing

【解决方案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 指定为“/heroes/start”，不要将其保留为默认的“/heroes”。

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

【讨论】：