如何在Angular2中切换布局 [英] How to switch layouts in Angular2

问题描述

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

What is the best practices way of using two entirely different layouts in the same Angular2 application? For example in my /login route I want to have a very simple box horizontally and vertically centered, for every other route I want my full template with header, content and footer.

推荐答案

在您的主要组件html中，您可以添加以下路由出口，以用于切换布局.

In your main component html you can add the following routes outlet which you will use to switch layout.

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

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

In this case you can configure your routes to switch the header, navbar if any and footer of your app when page changes. The following is an example of how you can configure your routes.

示例1 假设第一个布局只有页眉和页脚，而没有任何侧边栏/导航栏

Example 1 Lets assume the first layout has only header and footer without any sidebar/navbar

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. 这是第二种布局的路线配置

Example 2. This is your routes config for your second layout

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

使用此功能很容易在页面上添加第三个，第四个和一个...布局.

With this its very easy to add a third and a fourth and a ... layout to your page.

希望这会有所帮助

** 已更新 **

RouterConfig已更改为路由".

RouterConfig has been changed to Routes.

所以上面的代码现在将是

So the code above will now be

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

这篇关于如何在Angular2中切换布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！