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>