Angular 4延迟加载模块不适用于指定的子插座

Question

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

从我保存的该示例可以看出这： 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示例。

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 }
    ]
  }
];

最后，更改“ heroes”延迟加载模块的导航链接，以包含命名的出口信息。 确保将完整的URL指定为“ / heroes / start”，请勿将其保留为默认的“ / heroes”。

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