兩種組分可以是抽象的在Angular2路由器

Question

我有三個組成部分：

1. 根組分（root）是與應用程序模塊 組件引導程序。
2. 工具欄組件（toolbar）包含的工具欄爲 所有的孩子。
3. 儀表板組件（dashboard）即 第一個真實頁面。

所以root和toolbar不應該有它自己的網址，並dashboard應該。在生成的HTML我希望他們投入 彼此通過以下方式：

<root> 
    <toolbar> 
    ...some toolbar inner code 
    <dashboard> 
     ...dashboard page code 
    </dashboard> 
    </toolbar> 
</root> 

而這一切的代碼應該由單一的URL加載：HTTP：///儀表盤現在

我有下面的代碼：

root模塊路由

const rootRoutes: Routes = [ 
    {path: '', component: ToolbarComponent}, 
]; 

toolbar模塊路由

const toolbarRoutes: Routes = [ 
    {path: 'dashboard', component: DashboardComponent}, 
]; 

它的工作原理，但替換toolbar組件與dashboard。

我該如何編寫我的Routes陣列來滿足這個需求？與ui-router和不贊成component router AngularJS我可以做到這一點。

Answer 1

在ToolbarComponent的模板

添加router-outlet，然後選擇路線的配置會像

const rootRoutes: Routes = [ 
    { path: '', 
     component: ToolbarComponent, 
     children: { 
     { path: 'dashboard', component: DashboardComponent } 
     } 
]; 

現在/dashboard將呈現兩個工具欄和Dashboard