如何在Angular2中切换布局

Question

在同一个Angular2应用程序中使用两个完全不同的布局的最佳实践方法是什么？例如,在我的/登录路线中,我想要一个非常简单的水平和垂直居中的框,对于每一个其他路线,我想要我的完整模板与标题,内容和页脚.

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

Answer 2

在Angular 4中(也可能在Angular 2中),您可以:

const routes: Route[] = [
  {path: 'admin', redirectTo: 'admin/dashboard', pathMatch: 'full'},
  {
    path: 'admin',
    children: [
      {
        path: '', component: DefaultLayoutComponent,
        children: [
          {path: 'dashboard', component: DashboardComponent}
        ]
      },
      {
        path: '',
        children: [
          {path: 'login', component: LoginComponent}
        ]
      }
    ]
  }
]

通过使用,path: ''您不必为了使用简单的布局而发明不同的url名称空间.这就是视图的样子:

index.html的:

<router-outlet>

默认的layout.html:

<div class="sidebar"></div>
<div class="content">
  <router-outlet></router-outlet>
</div>