1つのコンポーネントが兄弟を経由する

Question

3つのトップレベルコンポーネントを持つAngular2アプリケーションがあります。ブートストラップされたappコンポーネントには、ページの本体を構成するヘッダー、サイドバー、およびルータ出口があります。ヘッダーとサイドバーをアプリの永続的な機能にして、ルータを使用して本文に表示されている内容を制御します。

<div> 
    <app-header></app-header> 
</div> 

<div> 
    <app-sidebar></app-sidebar> 
</div> 

<div> 
    <router-outlet></router-outlet> 
</div> 

だから私は実装することができるようにサイドバーを探しています...

<p><a [routerLink]="['/thing1']">Sidebar -> thing1</a></p> 

<p><a [routerLink]="['/thing2']">Sidebar -> thing2</a></p> 

...とルータのショーにこのコンポーネントまたは指定で、そのコンポーネントを持っていますページの一部。アプリのどのレベルがRouter、RouteConfig、ROUTER_DIRECTIVESのどれを必要とするかは私には非常に不明です。私は、angle-cliの足場でthing1/thing2のルートを追加しました。ルータリンクのディレクティブが含まれていないと少なくともコンパイルされます。@Routesは有効と思われ、すべてがロードされます。

私がやろうとしていることをするためのより良い方法はありますか？

Answer 1

あなたが含まれているすべてのコンポーネントに

• @Routes()を必要とする使用するすべてのコンポーネントの
• provide: [ROUTER_DIRECTIVES]（router-deprecatedまたはAngular2ベータで@RouteConfig()）<router-outlet></router-outlet><a [routerLink] ...か、命令的にナビゲートしたい
• Router<router-outlet></router-outlet> （this.router.navigateXxx()）またはRouterクラスの他の機能を使用してください。
HTMLは、上記1つのビューである場合

はその後

<p><a [routerLink]="['thing1']">Sidebar -> thing1</a></p> 
<p><a [routerLink]="['thing2']">Sidebar -> thing2</a></p> 

は新しいRC.1ルータで動作するはずです。 もしthing1とthing2は、トップレベルの/でも（例えば、以下に同じ）働くパスを接頭辞ルートの

あるルータ-非推奨あなたは

<p><a [routerLink]="['Thing1']">Sidebar -> thing1</a></p> 
<p><a [routerLink]="['Thing2']">Sidebar -> thing2</a></p> 

ThingXようなものが必要でしょうが、の名前でありますルート。

（ないあなたは

Answer 2

を提供される情報には、名前のコンセント見上げているので：<router-outlet name="sidebar"></router-outlet>

を、あなたのルートのパスに：あなたが使用する

http://vsavkin.tumblr.com/post/145672529346/angular-router

代わりの<app-sidebar></app-sidebar>

を

{ 
    path: 'thing1', 
    component: Thing1Component, 
    outlet: 'sidebar' 
}