AUX URLなしの角度2のネストされたビュー

Question

私はAngular 2 Routingを試しています。

私のアプリケーションは4ページと4つのルート（r1、r2、r3、r4）を持っています。これらのページの2つのグループを分けたいと思います。 r1とr2の "content 1"フィールドは同じになります。 r3とr4の場合、「Content 1」フィールドは同じになり、「Content 2」フィールドは各ルートごとに変更されます。

テンプレート内のコンポーネントを呼び出すことでこれを行うことができますが、「コンテンツ1」フィールドは再コンパイルされています。

私はAUXルーティングを使いたくありません。 URLは醜く見えます。

私は角度1でこれを行うことができました。どのように角度2でこれを行うことができますか？

<header></header> 
<content-1></content-1> 
<router-outlet></router-outlet> 
<footer></footer> 

は今、それが正しいcontent 2データを示してルータを設定：

Answer 1

次の各コンテンツは、別々のコンポーネントをブロックすることによって、アプリのルートの場所でこのようなものを作成することができます特定のルートのために。コンポーネントも通信できるので、関連するデータをcontent-1コンポーネントに渡すことができます（角度ドキュメントのComponent interactionを参照）。

Answer 2

角度2のデフォルトルータのように見えません実際にはは複数の名前付きビューをサポートしています。まれなケース（ポップアップ、ダイナミックエリアなど）では、この奇妙なAUXルーティング（アウトレットという名前の）機能が便利かもしれませんが、複数のプレースホルダを持つ古典的なマスター/子テンプレートでは絶対に使用できません。

ラジカル溶液は、デフォルト値の代わりにui-router for angular-2に切り替えることができます。

Answer 3

router-outletの名前を次のように指定すると、これを実現できます。上記のコードcontentr12Componentで

{ 
    path: 'r1', 
    component: 'appComponent', 
    children: [ 
     { path: '', component: contentr12Component, outlet: 'content1_r1_r2' }, 
     { path: '', component: contentr1Component, outlet: 'content2' } 
    ] 
} 
// write same for r2 just change content1Component you want to load on /r2 route. 

{ 
    path: 'r3', 
    component: 'appComponent', 
    children: [ 
     { path: '', component: contentr34Component, outlet: 'content1_r2_r4' }, 
     { path: '', component: contentr3Component, outlet: 'content2' } 
    ] 
} 

// write same for r4 just change content3Component you want to load on /r4 route. 

は同じままになります：あなたが最初appComponentをロードしている次のように、

<header></header> 
<router-outlet name='content1_r1_r2'><router-outlet/> 
<router-outlet name='content1_r3_r4'><router-outlet/> 
<router-outlet name='content2'><router-outlet/> 
<footer></footer> 

app.component.htmlは、ルーターを設定仮定し

r1とr2のルートでは、contentr34Componentはr3とr4で同じになります。コンポーネントごとに名前を置き換えることができます。

これは、醜い探しているURLも同様に回避します。