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

所以上面的代码现在将

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团队在路由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) 
  ]; 
  

• 在主部件，其中，你会点击的链接（即，NAV-巴），则需要添加[routerLink] =“myRouteName”（例如，“/登录”）和一对路由器的-outlet标签，这是新组件（又名视图）将被插入的位置。

  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上的文档非常宝贵。真的很清楚，对许多方面进行循序渐进的解释，并且在进入一个新的主题时是一个很好的第一站。

Answer 3

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

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

/fullLayout /视图 - 显示完整布局结构

/simpleLayout /图 - 显示简单的布局结构

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

在4角（大概也是在角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>