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

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

我强烈建议您阅读Angular团队关于路由here的教程。

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

创建一个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 {

}

希望有所帮助。我上个月一直在学习角度2，而angular.io的文档非常宝贵。对很多方面的逐步解释非常清晰，并且在进入新主题时是一个良好的第一站。

如何在Angular2中切换布局

4 个答案: