角4名前付きルーターアウトレットが動作しない遅延ロード

Question

名前付きルーターアウトレットにルーティングしようとしていない遅延読み込みに問題があります。誰かがどこで間違っているかを見ることができますか？メインページには、[製品] - > [デフォルトのルータのアウトレット]、[製品の詳細] - > [ルータのアウトレット]というリンクがあります。

<div> 
    <div><a [routerLink]="['product']"> Product </a> </div> 
    <div><a [routerLink]="['productdetail',{outlets:{productdetail: 'detail'}}]"> Product Detail </a> </div> 
    <div> <router-outlet></router-outlet></div> 
    <div> <router-outlet name="detail"></router-outlet> 
</div> 

以下は、プランカコードである。

Plunker Code

Answer 1

この知られているバグ、問題here

を追跡することができます回避策か、我々は、この問題に対する解決策は、あなたのトップ レベルルートの場合のために、空でないパスを使用されると言うことができます遅延ロードされたモジュールに補助的な（すなわち指定された）ルートが存在します。私が見ることができる

唯一の欠点は、追加のURLセグメントがルートに加え、ある

MainRoutingModule：トップレベルの非空のパス（すなわち、 "パス： '負荷'"）

import { ModuleWithProviders, NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { MainpageComponent } from './mainpage.component'; 
import { ProductComponent } from './product.component'; 
import { ProductDetailComponent } from './productdetail.component'; 

const childroutes: Routes = [ 

{ path: 'load', component: MainpageComponent , 
    children: [ 
     {path: 'product', component: ProductComponent 
     {path: 'productdetail', component: ProductDetailComponent, 
     outlet: 'detail' 
     }, 

    ] 
}, 


]; 

export const routing: ModuleWithProviders = RouterModule.forChild(childroutes); 

const newLocal: NgModule = { 
    imports: [RouterModule.forChild(childroutes) ], 
    exports: [RouterModule, ], 
    declarations: [] 
}; 

@NgModule(newLocal) 


export class MainRoutingModule { } 

MainpageComponent：セカンダリルートを使用する正しい構文。

[routerLink] = "[{アウトレット：{詳細：[ 'productdetail']}}]"

import { Component, OnInit, ViewEncapsulation } from '@angular/core'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'app-main', 
    template: ` 
    <div> 

    <div><a [routerLink]="['product']"> Product </a> </div> 
    <div><a [routerLink]="[{outlets:{detail:['productdetail']}}]"> Product Detail </a> </div> 
    <div> <router-outlet></router-outlet></div> 
    <div> <router-outlet name="detail"></router-outlet> 

</div> 
    `, 
    encapsulation: ViewEncapsulation.None, 
}) 

export class MainpageComponent {} 

LoginComponent：

使用[routerLink] =」 ['mainpage/load'] "を押してメインモジュールをロードします。

import { Component, OnInit, OnDestroy } from '@angular/core'; 

@Component({ 
    selector: 'app-login', 
    template: `This is login page place holder <br> <a [routerLink]="['mainpage/load']">Go to Main Page</a>`, 

}) 

export class LoginComponent implements Oninit, OnDestroy { 
constructor() {} 

ngOnInit(): void {} 

} 

デモ：それはバグであることを指摘しhttps://plnkr.co/edit/0ZpNL3lvbRbexLzQqRZh?p=preview