Angular2：1子から別のリンク、同じレベル

Question

に私はこのようにBを参照して、親コンポーネントAと子コンポーネントBを持っている：

@RouteConfig([ 
{ 
    path: '/screen-b/...', 
    name: 'ScreenB', 
    component: ScreenBComponent 
} 
]) 

Bがルータのコンセントを持っており、3

@RouteConfig([ 
    { 
    path: '/screen-aa', 
    name: 'ScreenAA', 
    component: ScreenAAComponent, 
    useAsDefault: true 
    }, 
    { 
    path: '/screen-bb', 
    name: 'ScreenBB', 
    component: ScreenBBComponent 
    }, 
    { 
    path: '/screen-cc', 
    name: 'ScreenCC', 
    component: ScreenCComponent 
    } 
]) 

成分Bのテンプレート内で、私はこの、サブコンポーネントのAAのようなリンクに入れた場合、BBおよびCCは、Bのルータ口でちょうど罰金を表示：

次のように定義されたサブコンポーネント、

<a [routerLink]="['ScreenAA']">Screen AA</a> 
<a [routerLink]="['ScreenBB']">Screen BB</a> 
<a [routerLink]="['ScreenCC']">Screen CC</a> 

しかし、同じリンクをAA、BB、またはCCに入れてリンクすると、何も起こりません（ただし、アドレスバーのURLは変更されます）。私は、AA、BB、CCにはルーターアウトレットがないため、これはAngular2が置いてくれる場所だからだと思います。

階層をルーティングすることは可能ですが、常に低レベルのルータのアウトレットでのみ可能ですが、決して同じレベル以上にはなりません。どのようにこの機能を達成するためには、ほとんどのWebサイトに不可欠ですか？

私が必要とするのは、コンポーネントの内部をクリックして、そのコンポーネントを別のものに置き換えて、低レベルのルータのアウトレットで何かを開くことができないようにすることです。

Answer 1

ルーティングでいくつかのコンテンツをロードするすべてのコンポーネントにrouter-outletを置く必要があります。次に、このようなコードを使用して動作させる必要があると思います。ルートは../で始まる場合

<a [routerLink]="['../ScreenAA']">Screen AA</a> 
<a [routerLink]="['../ScreenBB']">Screen BB</a> 
<a [routerLink]="['../ScreenCC']">Screen CC</a> 

あなたのコンポーネントあなたの質問に応じてBは、子コンポーネントを持っているし、それらのCHILコンポーネントB componentのためにそう../でURLを付加することで今の親であるため、ルータは、現在見ていきますコンポーネントの親です。角度の

最初のルート名

公式から

は/前に付加する必要があり、./、または../。ルートが/で始まる場合、ルータはアプリのルートからルートをルックアップします。ルートが./で始まる場合、ルータは代わりに現在のコンポーネントの子プロセスでルートを探します。ルートが../で始まる場合、ルータは現在のコンポーネントの親を調べます。

Answer 2

Iからリンクしようとしていたページから、次の削除：

directives: [RouterOutlet, ROUTER_DIRECTIVES], 
providers: [ 
ROUTER_PROVIDERS, 
] 

とリンクが機能し始めました。