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

最后更改“英雄”的导航链接。延迟加载模块以包含指定的插座信息。请务必将完整的网址指定为＆＃39; / heroes / start＆＃39;，不要将其保留为默认的＆＃39; /英雄＆＃39;。

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

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

1 个答案: