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

希望这有助于！