Angular2でシングルアプリケーションを使用している同じページ内の複数のコンポーネント

Question

Angular2でhtmlの一部を子から親にレンダリングする方法。 アイデアは、メインレイアウトを作成することです。このレイアウトのセクションは、要件に基づいて子によってオーバーライド（塗り潰されます）されます。 私はauxを試しました。私はそれを動作させることができませんでした。 PS：これはページの一部なので、この部分が自分のルートになることは嫌いです。 最新のAngular2してください！あなたは、個々のテンプレートの特定のルートを望んでいないので、次のように

例

<div class="layout"> 
    <div class="page-header"> 
     //Another router outlet here (How to render also this part for each child seperate) 
     //Some children will have custom page header 
    </div> 
    <div class="content"> 
     //content from child is rendered here 
     <router-outlet></router-outlet> 
    </div> 
</div> 

Answer 1

のために、あなたはこれを達成することができます。

ロード時にappComponentをブートストラップしています。

app.component.html

<div class="layout"> 
    <div class="page-header"> 
     //Another router outlet here (How to render also this part for each child seperate) 
     //Some children will have custom page header 
     <router-outlet name='child1'></router-outlet> 
    </div> 
    <div class="content"> 
     //content from child is rendered here 
     <router-outlet name='child2'></router-outlet> 
    </div> 
</div> 

は、ルータに次の行を追加します。 /ホームがappComponentが割り当てられたテンプレートを使用して負荷を取得しますロードされている今、

{ 
    path: 'home', // you can keep it empty if you do not want /home 
    component: 'appComponent', 
    children: [ 
     { 
      path: '', 
      component: childOneComponent, 
      outlet: 'child1' 
     }, 
     { 
      path: '', 
      component: childTwoComponent, 
      outlet: 'child2' 
     } 
    ] 
} 

は、その後、角度のルータは、ルートをチェックして、名前に基づいて指定されたルータのコンセントの子供たちのコンポーネントをロードします。