Angular2 - 명명 된 라우터 - 콘센트가 하위 경로가있는 구성 요소로 이동하지 않습니다.

Question

버튼이있는 상위 구성 요소가 있습니다. 하위 구성 요소를 내부에 표시하는 기능이 있습니다. 나는 아이에게 항해하기 위하여 지명 된 대패 출구를 이용하고있다. 내 시도가 다음과 같은 예를 기반으로합니다 https://github.com/vsavkin/router_mailapp이

라우팅

... 
{ 
    path: 'commissions-module/agents/:agentId/extra-commissions', 
    component: ExtraCommissionsComponent, 
    children: [{ 
     path: 'regeneration-parameters', 
     component: RegenerationParametersComponent, 
     outlet: 'parameters' 
    }] 
} 
... 

당신이 볼 수 있듯이 ('작성'의 팝업을 표시), 부모 구성 요소의 경로 I 그러므로, 변수 세그먼트 (agentId)를 포함 절대 경로 라우팅을 사용할 수 없습니다. 부모 및 자식 구성 요소 모두 모듈 파일에 가져옵니다.

HTML 템플릿 : 프로그램을 탐색하려고 할 때 버튼을 누른 후

displaySubcomponent() { 
    this.router.navigate(['/', {outlets: {parameters: ['regeneration-parameters']}}]) 
} 

를 표시

<button (click)="displaySubcomponent()">Show</button> 
<router-outlet name="parameters"></router-outlet> 

방법, 페이지

EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'regeneration-parameters' 

로 응답 내가 필요한

.../commissions-module/agents/1000555/extra-commissions(parameters:regeneration-parameters) 

재생 파라미터이 여분의 수수료의 자식으로 다음과 같은 URL을 얻을 수있다 :

.../commissions-module/agents/1000555/extra-commissions/(parameters:regeneration-parameters) 

흥미로운 점은이 같은 새 URL 작성됩니다 두 번째 URL을 주소 표시 줄에 삽입하면 하위 구성 요소가 상위 구성 요소 내부에 표시됩니다. router.navigate() 함수로 작성된 URL의 괄호 앞에 슬래시 ("/")가 없기 때문입니다.

예제에서 똑같은 점이 좋게 나옵니다. 비슷한 문제에 대한 다른 해결책도 있습니까? 보이지 않는 숨겨진 것이 있습니까? 감사합니다.

Answer 1

단일 라우터 콘센트를 사용할 때 일반적으로 명명 된 라우터 대신 기본 라우터가 사용되므로 솔루션이 상당히 숨겨졌습니다. 요점은, 비록 우리가 응용 프로그램에서 단일 명명 된 콘센트를 사용하고자하더라도, 하나의 기본 (이름이없는) 콘센트가 필요하다는 것입니다. 템플릿은 다음과 같이 간단하게 표시됩니다.

<button [routerLink]="['./', {outlets: {parameters: 'regeneration-parameters'}}]"> 
    Show 
</button> 

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