我正在创建一个类似于应用程序的仪表板。我想实现角（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