angular2 (2.1.1)에서 하나의 routerLink를 사용하여 여러 콘센트를 트리거하는 방법

Question

routerLink 요소를 선택할 때 DOM의 두 개의 개별 영역에서 구성 요소를 교환하고 싶습니다. routerLink을 2 <router-outlet>으로 라우팅하고 각 <router-outlet>에 대해 고유 한 구성 요소를 지정하려면 어떻게해야합니까?

나는 이런 식으로 뭔가를 싶습니다

<div id="region1> 
    <a routerLink="/view1" routerLinkActive="active">View 1</a> 
    <a routerLink="/view2" routerLinkActive="active">View 2</a> 

    <!-- First area to swap --> 
    <router-outlet name="sidebar"></router-outlet> 

<div> 

<div id="region2> 
    <!-- Second area to swap --> 
    <router-outlet name="mainArea"></router-outlet> 
<div>  

루트

const routes: Routes = [ 
    { path: '', redirectTo: 'view1', pathMatch: 'full'}, 
    { path: 'view1', { 
    outlets : 
     [ 
     //one path specifies 2 components directed at 2 `router-outlets` 
     component: View1Sidebar, outlet : 'sidebar' 
     component: View1mainArea, outlet : 'mainArea' 
     ] 
    } 
    }, 
    { path: 'view2', { 
    outlets : 
     [ 
     component: View2Sidebar, outlet : 'sidebar' 
     component: View2mainArea, outlet : 'mainArea' 
     ] 
    } 
    }, 
]; 

Answer 1

당신이 요청으로이 정확하게 수행 할 수 없습니다. 라우터의 목적은 특정 페이지에 대한 정보를 유지하는 것입니다.

경로 정보를 반영하지 않고 구성 요소를 표시하거나 숨기려면 *ngIf 지시문을 사용하는 것이 좋습니다. 이런 식으로 사용하려면 *ngIf 지시문을 트리거하는 데 사용할 수있는 어플리 케이션의 어딘가에 변수를 유지해야합니다.

당신은 사용에게 모든 유형의 데이터를 만들 수 있습니다,하지만 당신은 부울로 확인되는 부울 또는 식의 형태로 *ngIf 문에 전달해야합니다 여기 예 "이다

구성 요소

showComponentBool: boolean = true; 
showComponentStr: string = 'show'; 

HTML와

<div *ngIf="showComponentBool"> 
    <div *ngIf="showComponentStr='show'"></div> 
</div> 

Answer 2

"@ 각도/핵심 ":"^ 4.0.0 "

<a [routerLink]="[{ outlets: { primary: 'contact', aux: 'aside' }}]">Contact + Aux</a> 

https://stackoverflow.com/a/42558766/2536623