如何在 Angular2 中切换布局

在同一个 Angular2 应用程序中使用两种完全不同的布局的最佳实践方法是什么？例如，在我的 /login 路线中，我想要一个非常简单的水平和垂直居中的框，对于每个其他路线，我想要带有页眉、内容和页脚的完整模板。

在您的主要组件 html 中，您可以添加以下路由出口，您将使用它来切换布局。

<router-outlet name="header"></router-outlet>
<router-outlet name="navbar"></router-outlet>
<router-outlet></router-outlet>
<router-outlet name="footer"></router-outlet>

在这种情况下，您可以配置路由以在页面更改时切换应用程序的页眉、导航栏（如果有）和页脚。以下是如何配置路由的示例。

实施例1 让我们假设第一个布局只有页眉和页脚，没有任何侧边栏/导航栏

export const welcome_routes: RouterConfig = [
  { path: 'firstpage', children:[
     { path: 'login', component: LoginComponent},
     { path: 'signup', component: SignupComponent},
     { path: '' , component: Header1Component, outlet: 'header'}
     { path: '' , component: Footer1Component, outlet: 'footer'}
  ]}
];

示例 2. 这是第二个布局的路线配置

 export const next_layout_routes: RouterConfig = [
  { path: 'go-to-next-layout-page', children:[
     { path: 'home', component: HomeComponent},
     { path: '' , component: Header2Component, outlet: 'header'}
     { path: '' , component: NavBar2Component, outlet: 'navbar'}
     { path: '' , component: Footer2Component, outlet: 'footer'}
  ]}
];

这样就可以很容易地向页面添加第三个、第四个以及......布局。

希望这可以帮助

** Updated **

RouterConfig 已更改为路由。

所以上面的代码现在将是

export const welcome_routes: Routes = [
  { path: 'firstpage', children:[
     { path: 'login', component: LoginComponent},
     { path: 'signup', component: SignupComponent},
     { path: '' , component: Header1Component, outlet: 'header'}
     { path: '' , component: Footer1Component, outlet: 'footer'}
  ]}
];