角4の遅延ロードモジュールが名前付きの子アウトレットで動作しない

Question

モジュールの遅延ロードを実装しようとしています。このモジュールには、一意のコンセント名のの子ルートがあります。これは、私がルートを訪問しようとすると動作していないようです。

これは、することができ、私が保存され、この例から思わ：https://plnkr.co/edit/NNXAoZItM00RIIxzemts?p=preview

あなたは、私が英雄-routing.module.tsに

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

に設定された子のルートを持っていることがわかります

ルータ出口：

/ヒーロー/（ABC：リスト）私はそれをローカルに実行していますが、それがないとき、私はローカルホストを訪問することができるはずです hero.component.ts

で

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

動作するようです。

注：zipファイルをダウンロードし、npm installを実行してnpm startを実行すると、plunkerのサンプルをローカルで実行できます。

Answer 1

子ルートは、既定のunamedルートでは機能していないようです。

遅延ロードされたモジュールルートを変更し、既定のunamedルートから名前付きルートにリダイレクトします。

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>