如何在 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 中，你可以添加以下路由 outlet，你将使用它来切换布局.

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 已更改为 Routes.

RouterConfig has been changed to 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'}
  ]}
];

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