如何在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>