각도 2 (rc5) 라우터 - 사이드 바 탐색 (하위 라우팅)

Question

경로 내에서 경로를 올바르게 수행하는 방법을 파악하는 데 문제가 있습니다. 내가 달성하고자하는 무엇을 : 나는 사이드 바 탐색이 사라 info-one/info-two를 클릭 할 때마다 이제

<div class="sidebar-navigation> 
    <a routerLink="/news/info-one" routerLinkActive="active">Info one</a> 
    <a routerLink="/news/info-two" routerLinkActive="active">Info two</a> 
</div> 

<router-outlet></router-outlet> 

App 
    -Contacts (view) 
    -News (view) 
    SidebarNavigation (persistent throught news) 
    -InfoOne (child-view of news) 
    -InfoTwo (child-view of news) 

news.component.html, 내가 발생하는 문제입니다. 어린이의 내면에 어린이보기를 표시하려면 각도를 말하고 <router-outlet></router-outlet>이 아닌 주 <router-outlet></router-outlet>에없는 것을 어떻게 알 수 있습니까?

나는 공식 자습서에서 포크 plunker를 만들었다. app/news.component.ts 및 app/app.routing.ts

---

좀 더 코드 :
app.routing.ts : 봐 가지고,

Answer 1

문제가 Routes 함께

import { Routes, RouterModule } from '@angular/router'; 

import { ContactComponent } from './contact.component'; 
import { NewsComponent, InfoOneComponent, InfoTwoComponent } from './news.component'; 

const appRoutes: Routes = [ 
    { 
    path: '', 
    redirectTo: '/news', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'contact', 
    component: ContactComponent 
    }, 
    { 
    path: 'news', 
    component: NewsComponent 
    }, 
    { 
    path: 'news/info-one', 
    component: InfoOneComponent 
    }, 
    { 
    path: 'news/info-two', 
    component: InfoTwoComponent 
    } 
]; 

export const routing = RouterModule.forRoot(appRoutes); 

덕분에, 아래를 업데이트를

자녀 경로를 정의하고 i 어린이 배열 안에 들어가야합니다. 아이들을 추가하지 않으면 뉴스 구성 요소 안에 추가 한 것이 아닌 기본 router-outlet에로드됩니다.

const appRoutes: Routes = [ 
{ 
    path: '', 
    redirectTo: '/news/info-one', 
    pathMatch: 'full' 
}, 
{ 
    path: 'contact', 
    component: ContactComponent 
}, 
{ 
    path: 'news', 
    component: NewsComponent, 
    children : [ 
    { 
    path: '', 
    redirectTo: '/news/info-one', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'info-one', 
    component: InfoOneComponent 
    }, 
    { 
    path: 'info-two', 
    component: InfoTwoComponent 
    } 
] 
}]; 

이가 도움이 Plunker!!

희망을 업데이트!