在Angular2中使用單一應用程序在同一頁中的多個組件

Question

如何在Angular2中將子項的一部分從父項呈現到父項。 這個想法是做一個主佈局和這個佈局的部分被孩子根據需求覆蓋（填充）。 我試過了。路線，但我不能讓它工作。 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> 

添加以下到您的路由器。

{ 
    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' 
     } 
    ] 
} 

現在，當/家庭裝appComponent將獲得與分配的模板負載，則角路由器會檢查路由和負載在指定路由器出口孩子組件名稱的基礎上。