자식 경로에 명명 된 라우터 콘센트의 내용 설정

Question

내 응용 프로그램에서는 기본 라우터 하나와 명명 된 라우터 두 개의 콘센트에 내용을 표시하려고합니다. 내가 루트 레벨에 모두 콘센트를 배치 할 경우, 나는이 같은 명명 된 콘센트의 내용을 설정할 수 있어요 그러나

this.router.navigate([{ outlets: { rootSecondary: ['rootSecondaryPath'] } }]); 

을, 나는 하나의 라우터 콘센트를 제공 할 수있는 응용 프로그램의 일반적인 레이아웃을 원하는 자식 경로에서 다른 라우터 - 아웃렛 구조를 사용할 수 있습니다.

하위 경로를 만들면 기본 콘센트와 이름이 지정된 콘센트가 있는데 보조 콘센트의 내용을 설정할 수 없습니다. 보고 된 오류는 다음과 같습니다.

어떤 경로와도 일치 할 수 없습니다.

과 같이 정의된다 경로

은 다음과 같습니다

이

const appRoutes: Routes = [ 
    { path: '', component: RootPrimaryComponent }, 
    { path: 'rootSecondaryPath', component: RootSecondaryComponent, outlet: 'rootSecondary' }, 
    { 
    path: 'child', component: ChildComponent, children: 
     [ 
     { path: '', component: ChildPrimaryComponent }, 
     { path: 'childSecondaryPath', component: ChildSecondaryComponent, outlet: 'childSecondary' }, 
     ] 
    }, 
]; 
const appRouting = RouterModule.forRoot(appRoutes); 

app.component.html의 템플릿이 기본 콘센트와 포함 - 테스트 목적 - 명명 된 이차 하나

을

<router-outlet></router-outlet> 
<div style="border: solid 1px green"> 
    <router-outlet name="rootSecondary"></router-outlet> 
</div> 

위의 코드는 버튼에서 호출되며 아무 문제없이 rootSecondary 콘센트를 설정합니다.

child.component.html 루트 주 콘센트의 내부에 배치 된 두 개의 콘센트 정의 템플릿 :

<router-outlet></router-outlet> 
<div style="border:solid 1px red"> 
    <router-outlet name="childSecondary"></router-outlet> 
</div> 

child.primary.component.html은에 코드를 호출하는 버튼이 있습니다 클릭하면

<div> 
    child-primary works! 
    <button (click)="setChildSecondary()">Set child secondary</button> 
</div> 

, 다음 코드가 실행 :

보조 콘센트를 설정

setChildSecondary() { 
    this.router.navigate([{ outlets: { childSecondary: ['childSecondaryPath'] } }]); 
} 

라우터 출력물 childSecondary가 채워지도록 코드를 변경하려면 어떻게해야합니까? 이 문제를 해결하기 위해

Answer 1

, 나는 현재 활성화 된 경로의 부모에게 relativeTo PARAM을 설정하는 데 필요한 :

export class ChildPrimaryComponent { 

    constructor(private readonly router: Router, 
    private readonly route: ActivatedRoute) { } 

    setChildSecondary() { 
    this.router.navigate([{ outlets: { childSecondary: ['childSecondaryPath'] } }], 
     { relativeTo: this.route.parent }); 
    } 
}