angular - 如何在 Angular2 中切换布局

Question

在同一个 Angular2 应用程序中使用两种完全不同的布局的最佳做法是什么？例如，在我的/login 路由中，我希望有一个水平和垂直居中的非常简单的框，对于所有其他路由，我希望我的完整模板包含页眉、内容和页脚。

Answer 1

在您的主要组件 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'}
  ]}
];

有了它，可以很容易地向您的页面添加第三个和第四个以及...布局。

希望对你有帮助

** 已更新 **

RouterConfig 已更改为 Routes。

所以上面的代码现在是

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