角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にロードされます。 Plunker!!

を更新しました

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 
    } 
] 
}]; 

この情報がお役に立てば幸いです！