Angular2 : 여러 경로의 라우터 아웃렛 및 라우터 아웃렛

Question

왼쪽 탐색 ("사용자 관리", "차량 관리"및 "관리"포함)가 포함 된 응용 프로그램을 만들었습니다. 다음과 같이 각각의 구성 요소에 갈

라우팅은 현재 작동 :

• /user 사용자 - 구성 요소
• /vehicle은 차량 구성 요소
• /admin은 관리자 홈 구성 요소
열립니다 열립니다 열립니다

"관리"를 클릭하면 톱 메뉴 Admin-Home-Component, User-Admin-Component 및 Vehicle-Admin-Component 로의 탐색을 제어하기 위해 표시되어야합니다. 내가 원하는

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<ul class="nav nav-tabs nav-justified"> 
 
    <li><a [routerLink]="/view/admin">Admin Home</a></li> 
 
    <li><a [routerLink]="['/view/admin/users']">User Admin</a></li> 
 
    <li><a [routerLink]="['/view/admin/vehicles']" >Vehicle Admin</a></li> 
 
</ul>

: 나는 모든 세 가지 구성 요소 내부 탐색 HTML을했다

{ 
    path: 'admin', 
    children:[ 
     { path: '', component: AdminHomeComponent}, 
     { path: 'users', component: UserAdminComponent}, 
     { path: 'cache', component: VehicleAdminComponent} 
    ] 
} 

: 나는 다음과 같은 경로를 구성하여이 작업을 수행 할 수 있었다 관리 구성 요소를 작성하여이 중 중복을 피하십시오. 이 AdminComponent 에는에 링크와 라우터 출력이 있어야합니다. 링크를 클릭하면 해당 구성 요소가로드되어야합니다.

경로 구성의 하위 부분에서 이름이 지정된 라우터 출력을 추가하고 "출력"속성을 사용하려고했습니다. 그건 작동하지 않습니다. 같은 콘센트 (http://plnkr.co/edit/JsZbuR?p=preview)에 여러 개의 라우터 콘센트가있는 예만 보았습니다. 다른 템플릿에 여러 라우터 출력을 구현할 수 없습니다..

Answer 1

다음과 같이 시도해보십시오.

{ 
    path: 'view/admin', 
    children:[ 
     { path: '', component: AdminHomeComponent}, 
     { path: 'users', component: UserAdminComponent}, 
     { path: 'vehicles', component: VehicleAdminComponent} 
    ] 
} 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<ul class="nav nav-tabs nav-justified"> 
    <li><a [routerLink]="/view/admin">Admin Home</a></li> 
    <li><a [routerLink]="/view/admin/users">User Admin</a></li> 
    <li><a [routerLink]="/view/admin/vehicles" >Vehicle Admin</a></li> 
</ul>