如何在Angular2中切换布局

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

Answer 1

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

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

在这种情况下，您可以configuration您的路线来切换页眉，导航栏（如果有的话）和页脚更改时的页脚。 以下是如何configuration您的路线的例子。

示例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.这是你的第二个布局的路线configuration

  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已更改为路由。

所以上面的代码现在是

 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> 

Answer 3

另一个简单的方法是定义儿童路线：

 const appRoutes: Routes = [ { path: 'fullLayout', component: FullLayoutComponent, children: [ { path: 'view', component: HomeComponent }, ] }, { path: 'simpleLayout', component: SimpleLayoutComponent, children: [ { path: 'view', component: HomeComponent }, ] } ]; 

/ fullLayout / view – 显示完整的布局结构

/ simpleLayout / view – 显示简单的布局结构

app.component.html

 <router-outlet></router-outlet> 

全layout.component.html

 <h1>Full layout</h1> <router-outlet></router-outlet> <h1>FOOTER</h1> 

简单layout.component.html

 <h1>Simple layout</h1> <router-outlet></router-outlet> 

Answer 4

我强烈build议您阅读Angular团队在这里进行路由的教程。

有一些设置需要实现，但一些关键步骤是：

• 创build一个app.routes.js文件，在该文件中指定路由名称以及该路由命中时应该加载的组件。

   import { provideRouter, RouterConfig } from '@angular/router'; import { LoginComponent } from 'components/login.component' const routes: RouterConfig = [ { path: '/login', //name of the route component: LoginComponent //component to load when route is hit } ]; export const appRouterProviders = [ provideRouter(routes) ]; 

• 在你要点击一个链接（即导航栏）的主组件中，你将需要添加[routerLink] ='myRouteName'（例如'/ login'）和一对路由器 – 组件（又称视图）将被插入。

   import { Component } from '@angular/core'; import { ROUTER_DIRECTIVES } from '@angular/router'; @Component({ selector: 'nav-bar', template: ` <h1>{{title}}</h1> <a [routerLink]="['/login']">Login</a> <router-outlet></router-outlet> `, directives: [ROUTER_DIRECTIVES] }) export class AppComponent { } 

希望有所帮助。 上个月我一直在学习angular 2，angular.io上的文档是非常宝贵的。 真的很清楚，在很多方面都是一步一步的解释，并且在进入一个新的话题时是一个很好的第一站。