Angular 2（rc5）路由器 - 側欄導航（子路由）

Question

我遇到問題了解如何正確地在路由中執行路由。我想什麼來實現：

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

news.component.html

<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> 

現在，我遇到的問題是，每當我點擊info-one/info-two側邊導航欄中消失。如何分辨角度以顯示子女<router-outlet></router-outlet>內的子女觀點，而不是主要的<router-outlet></router-outlet>？

我已經創建了一個叉plunker出官方教程。 看看：app/news.component.ts和app/app.routing.ts

---

更多的代碼：
app.routing.ts：

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); 

感謝

Answer 1

問題與Routes，更新如下，

您已經定義了兒童路線和i t需要進入兒童陣列。當你不添加孩子時，它將在主要的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!!

希望這有助於！