我正在創建一個類似於應用程序的儀表板。我想實現角（2+）以下的平面佈置圖：Angular（2+）中嵌套路由中的多個佈局
等沒有繼承......
所以基本上想什麼，我要是在某些（子）路線完全替換<body>的內容。
這對我不好：multiple layout for different pages in angular 2，因爲我不想將/（root）重定向到/ home之類的任何地方。
這一個不適合之一：How to switch layouts in Angular2
任何幫助將是巨大的！
可以使用子路由解決您的問題。
看到https://angular-multi-layout-example.stackblitz.io/或修改，https://stackblitz.com/edit/angular-multi-layout-example
工作演示設置您的路線如下圖所示
const appRoutes: Routes = [
//Site routes goes here
{
path: '',
component: SiteLayoutComponent,
children: [
{ path: '', component: HomeComponent, pathMatch: 'full'},
{ path: 'about', component: AboutComponent }
]
},
// App routes goes here here
{
path: '',
component: AppLayoutComponent,
children: [
{ path: 'dashboard', component: DashboardComponent },
{ path: 'profile', component: ProfileComponent }
]
},
//no layout routes
{ path: 'login', component: LoginComponent},
{ path: 'register', component: RegisterComponent },
// otherwise redirect to home
{ path: '**', redirectTo: '' }
];
export const routing = RouterModule.forRoot(appRoutes);
推薦參考：http://www.tech-coder.com/2017/01/multiple-master-pages-in-angular2-and.html
這正是我一直在尋找的！這是正確的答案。謝謝@Rameez！ – papaiatis
好吧，我去給這個一杆...
路線
創建路由可以通過多種方式來完成。您可以使用子路線或直接提供組件。
如果你想服務組件了直接，這將是理想的，
{ path: '*pathInURL*', component: *NameComponent* }
你面對
三個問題直接問題，
顯示組件作爲一個孩子。
在一個叫全角
模板顯示組件顯示名爲mediumwidth在模板組件
在你routes.ts
const APP_ROUTES: Routes = [
// landing page of your application
{ path: '', redirectTo: '/home', pathMatch: 'full', },
//anything that will be handled in blank template
{ path: '', component: BlankComponent, data: { title: 'blank Views' }, children: BLANK_ROUTES },
//anything that will be handled in fullwidth
{ path: '', component: FullComponent, data: { title: 'full Views' }, children: FULL_ROUTES },
// anything that will be handled in medium width
{ path: '', component: MediumComponent, data:{ title: 'Medium Views' }, children: MEDIUM_ROUTES }
];
這是怎麼回事轉發URL中的所有路徑以查看這些路由。它將檢查路線以查看它將落入哪個模板。
然後創建3個目錄。
/空白
/全
/中
使用每個母親模板這些文件夾，你會保持你的組件中。
因此，因爲登錄爲空。這將是在/空白
/blank/BlankComonent.ts每個目錄，你將創建被稱爲初始路徑文件中，我們已經創建了一個路線文件的
也。
/blank/blank.routes.ts
export const BLANK_ROUTES: Routes = [
{ path: 'login', component: LoginComponent }
];
然後在介質中的同樣的事情，
/blank/blank.routes.ts
export const MEDIUM_ROUTES: Routes = [
{ path: 'Some/Path', component: SomeMediumComponent }
];
然後同爲FULL_ROUTES
爲我們創建的每個目錄建立路徑文件。添加生活在同一目錄中的所有路由，並共享相同的母模板。
然後我們將創建一個模板目錄。說它/佈局
現在在direcotry這是將在其中創建
BlankComponent.ts FullComponent.ts MediumComponent.ts
每個組件都將有其相應的路由，這些內投放模板。因爲請記住我們的第一個routes文件表示我們將爲這些templates服務所有Child Routes。
所以佈局將被投放到router-outlet
import { Component } from '@angular/core';
@Component({
selector: 'body',
template: '<router-outlet></router-outlet>'
})
export class AppComponent {
}
你有機會來檢查我的答案嗎？ – wuno