각도 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

을 추적 할 수있는 해결 방법이나 우리는이 문제에 대한 해결책은, 최상위 수준 노선의 경우 대한 비어 있지 않은 경로를 사용하고 있다고 할 수 있습니다 auxilary (ie 명명 된) 라우트는 게으른로드 된 모듈에 존재합니다. 내가 볼 수

유일한 결함은 추가 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