Angular2中路由與導航的示例分析

這篇文章主要為大家展示了“Angular2中路由與導航的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Angular2中路由與導航的示例分析”這篇文章吧。

導航是很簡單的，只是不同頁面之間的切換，路由是實現導航的一種。

一個url對應的一個頁面，在angular2中是一個組件。定義一個規則。

基礎知識

大多數帶路由的應用都要在index.html的標簽下先添加一個元素，來告訴路由器該如何合成導航用的URL。

路由是從@angular/router包中引入的。

路由都是需要進行配置的。而這個配置需要的也就是RouterModule模塊。

一個路由配置

path中不能用斜線/開頭。

這些路由的定義順序是故意如此設計的。 路由器使用先匹配者優先的策略來匹配路由，所以，具體路由應該放在通用路由的前面。在上面的配置中，帶靜態路徑的路由被放在了前面，后面是空路徑路由，因此它會作為默認路由。而通配符路由被放在最后面，這是因為它是最通用的路由，應該只在前面找不到其它能匹配的路由時才匹配它。

const appRoutes: Routes = [
 {
 path:'',// empty path匹配各級路由的默認路徑。 它還支持在不擴展URL路徑的前提下添加路由。
 component: DashboardComponent
 },{
 path: 'dashboard',
 component: DashboardComponent
 }, {
 path: 'loopback',
 component: LoopbackComponent
 }, {
 path: 'heroparent',
 component: HeroParentComponent
 }, {
 path:'version',
 component: VersionParentComponent
 }, {
 path: '**',// **代表該路由是一個通配符路徑。如果當前URL無法匹配上我們配置過的任何一個路由中的路徑，路由器就會匹配上這一個。當需要顯示404頁面或者重定向到其它路由時，該特性非常有用。
 component: DashboardComponent,
 }
];

export const appRoutingModule: ModuleWithProviders = RouterModule.forRoot(appRoutes);

RouterOutlet - 路由插座

顯示路由器生成的視圖。在展示父路由的位置中的某個地方展示子路由對應的地方。

路由模塊

最開始的路由，我們是直接寫在app.module.ts文件中的，像這樣，我們可以實現簡單的導航。

import { NgModule }    from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent }   from './app.component';
import { CrisisListComponent } from './crisis-list.component';
import { HeroListComponent } from './hero-list.component';
const appRoutes: Routes = [
 { path: 'crisis-center', component: CrisisListComponent },
 { path: 'heroes', component: HeroListComponent }
];
@NgModule({
 imports: [
 BrowserModule,
 FormsModule,
 RouterModule.forRoot(appRoutes)
 ],
 declarations: [
 AppComponent,
 HeroListComponent,
 CrisisListComponent
 ],
 bootstrap: [ AppComponent ]
})
export class AppModule {
}

但是這樣不方便，所以我們要進行路由的分離，重構成我們自己的路由模塊。like this:

const appRoutes: Routes = [
 {
 path:'',
 component: DashboardComponent
 },{
 path: 'dashboard',
 component: DashboardComponent
 }, {
 path: 'loopback',
 component: LoopbackComponent
 }, {
 path: 'heroparent',
 component: HeroParentComponent
 }, {
 path:'version',
 component: VersionParentComponent
 }, {
 path: '**',
 component: DashboardComponent,
 }
];

export const appRoutingModule: ModuleWithProviders = RouterModule.forRoot(appRoutes);

同樣我們還可以寫多個路由模塊。但是我們必須在app.module.ts中進行imports:[appRoutingModule]。

組件路由

我們需要將一些特征區域分割開來，做成自己單獨的模塊。必如hero模塊。在這里，我們需要hero單獨的導航，這也就是組件路由。

平級的路由

@NgModule({
 imports: [
 RouterModule.forChild([
  { path: 'heroes', component: HeroListComponent },
  { path: 'hero/:id', component: HeroDetailComponent },
  { path:'heroform', component: HeroFormComponent },
 ])
 ],
 exports: [
 RouterModule
 ]
})
export class HeroRoutingModule { }

我們還有另外一中類型的路由組織方式，路由樹的形式。

const crisisCenterRoutes: Routes = [
 {
 path: '',
 redirectTo: '/crisis-center',
 pathMatch: 'full'
 }, {
 path: 'crisis-center',
 component: CrisisCenterComponent,
 children: [
  {
  path: '',
  component: CrisisListComponent,
  children: [
   {
   path: ':id',
   component: CrisisDetailComponent,
   },
   {
   path: '',
   component: CrisisCenterHomeComponent
   }
  ]
  }
 ]
 }
];

@NgModule({
 imports: [
 RouterModule.forChild(crisisCenterRoutes)
 ],
 exports: [
 RouterModule
 ]
})
export class CrisisCenterRoutingModule { }

重定向路由

添加一個redirect路由，它會把初始的相對URL（”）悄悄翻譯成默認路徑(/crisis-center)。

{
 path: '',
 redirectTo: '/crisis-center',
 pathMatch: 'full'
},

路由守衛

簡介

路由守衛，應用在這個路由不是對所有導航都有效的，是有一些前置條件的，只有當這些前置條件滿足的時候，才能被導航到該頁面。

可以在路由配置中添加守衛來進行處理。守衛可以返回一個boolean值，為true時，導航過程繼續，為false時，導航被取消，當然這時候也可以被導航到其他頁面。也可以返回返回一個Observable<boolean>或Promise<boolean>，并且路由器會等待這個可觀察對象被解析為true或false。

路由器支持多種守衛

用CanActivate來處理導航到某路由的情況。

用CanActivateChild處理導航到子路由的情況。

用CanDeactivate來處理從當前路由離開的情況。

用Resolve在路由激活之前獲取路由數據。

用CanLoad來處理異步導航到某特性模塊的情況。

使用規則

在分層路由的每個級別上，我們都可以設置多個守衛。 路由器會先按照從最深的子路由由下往上檢查的順序來檢查CanDeactivate守護條件。 然后它會按照從上到下的順序檢查CanActivate守衛。 如果任何守衛返回false，其它尚未完成的守衛會被取消，這樣整個導航就被取消了。

CanActivate

使用CanActivate來處理導航路由，需要在路由配置中，添加導入AuthGuard類，修改管理路由并通過CanActivate屬性來引用AuthGuard。

具體的守衛規則要看AuthGuard類的實現。而AuthGuard 類是需要繼承CanActivate 類的：export class AuthGuard implements CanActivate {}

import { AuthGuard }    from '../auth-guard.service';

const adminRoutes: Routes = [
 {
 path: 'admin',
 component: AdminComponent,
 canActivate: [AuthGuard], // 重點
 children: [
  {
  path: '',
  children: [
   { path: 'crises', component: ManageCrisesComponent },
   { path: 'heroes', component: ManageHeroesComponent },
   { path: '', component: AdminDashboardComponent }
  ],
  }
 ]
 }
];

@NgModule({
 imports: [
 RouterModule.forChild(adminRoutes)
 ],
 exports: [
 RouterModule
 ]
})
export class AdminRoutingModule {}

CanActivateChild 守衛自路由

就像我們可以通過CanActivate來守衛路由一樣，我們也能通過CanActivateChild守衛來保護子路由。CanActivateChild守衛的工作方式和CanActivate守衛很相似，不同之處在于它會在每個子路由被激活之前運行。我們保護了管理特性模塊不受未授權訪問，也同樣可以在特性模塊中保護子路由。

這個使用起來比較簡單，只需要在需要守衛的子路由的配置上添加即可。而AuthGuard 類是需要繼承canActivateChild 類的：export class AuthGuard implements canActivateChild {}

const adminRoutes: Routes = [
 {
 path: 'admin',
 component: AdminComponent,
 canActivate: [AuthGuard],
 children: [
  { // 無組件路由，相當于分組
  path: '',
  canActivateChild: [AuthGuard], // 守衛子路由
  children: [
   { path: 'crises', component: ManageCrisesComponent },
   { path: 'heroes', component: ManageHeroesComponent },
   { path: '', component: AdminDashboardComponent }
  ]
  }
 ]
 }
];

CanDeactivate 處理未保存的更改

在現實世界中，我們得先把用戶的改動積累起來。 我們可能不得不進行跨字段的校驗，可能要找服務器進行校驗，可能得把這些改動保存成一種待定狀態，直到用戶或者把這些改動作為一組進行確認或撤銷所有改動。

當用戶要導航到外面時，該怎么處理這些既沒有審核通過又沒有保存過的改動呢？ 我們不能馬上離開，不在乎丟失這些改動的風險，那顯然是一種糟糕的用戶體驗。

我們應該暫停，并讓用戶決定該怎么做。如果用戶選擇了取消，我們就留下來，并允許更多改動。如果用戶選擇了確認，那就進行保存。
在保存成功之前，我們還可以繼續推遲導航。如果我們讓用戶立即移到下一個界面，而保存卻失敗了（可能因為數據不符合有效性規則），我們就會丟失該錯誤的上下文環境。

在等待服務器的答復時，我們沒法阻塞它 —— 這在瀏覽器中是不可能的。 我們只能用異步的方式在等待服務器答復之前先停止導航。

我們需要CanDeactivate守衛。

Resolve

主要實現的就是導航前預先加載路由信息。可以做到，當真正需要導航進來這個詳情頁面時，是不需要再去獲取數據的。是提前加載好的。

服務可以實現Resolve守衛接口來同步或異步解析路由數據。

CanLoad - 保護特性模塊的加載

前提

異步路由，只要是懶惰加載特征區域。這樣做的好處：

1. 可以繼續構建特征區，但不再增加初始包大小。

2. 只有在用戶請求時才加載特征區。

3. 為那些只訪問應用程序某些區域的用戶加快加載速度。

路由器用loadChildren屬性來映射我們希望惰性加載的捆文件，這里是AdminModule。

const appRoutes: Routes = [

 {

 path: 'admin',

 loadChildren: 'app/admin/admin.module#AdminModule',

 }

];

映射到了我們以前在管理特性區構建的admin.module.ts 文件。在文件路徑后面，我們使用# 來標記出文件路徑的末尾，并告訴路由器AdminModule 的名字。打開admin.module.ts 文件，我們就會看到它正是我們所導出的模塊類的名字。

export class AdminModule {}

簡介

我們已經使CanAcitvate保護AdminModule了，它會阻止對管理特性區的匿名訪問。我們在請求時可以異步加載管理類路由，檢查用戶的訪問權，如果用戶未登錄，則跳轉到登陸頁面。但更理想的是，我們只在用戶已經登錄的情況下加載AdminModule，并且直到加載完才放行到它的路由。

我們可以用CanLoad守衛來保證只在用戶已經登錄并嘗試訪問管理特性區時才加載一次AdminModule。

幾個概念

無組件路由

無組件路由，不借助組件對路由進行分組。來看AdminComponent
下的子路由，我們有一個帶path和children的子路由，但它沒有使用component。這并不是配置中的失誤，而是在使用無組件路由。

const adminRoutes: Routes = [
 {
 path: 'admin',
 component: AdminComponent,
 children: [
  { // 無組件路由
  path: '',
  children: [
   { path: 'crises', component: ManageCrisesComponent },
   { path: 'heroes', component: ManageHeroesComponent },
   { path: '', component: AdminDashboardComponent }
  ]
  }
 ]
 }
];

@NgModule({
 imports: [
 RouterModule.forChild(adminRoutes)
 ],
 exports: [
 RouterModule
 ]
})
export class AdminRoutingModule {}

預加載: 在后臺加載特征區域

每次導航成功發生時，路由器將查看惰性加載的特征區域的配置，并根據提供的策略作出反應。 路由器默認支持兩種預加載策略：

1. 完全不預加載，這是默認值。惰性加載特征區域仍然按需加載。

2. 預加載所有惰性加載的特征區域。

路由器還支持自定義預加載策略，用來精細控制預加載。

自定義預加載策略

Route Data 啟動預加載

其中有參數preload布爾值，如果它為true，就調用內置Router

提供的load函數預主動加載這些特征模塊。

創建自定義策略

我們將需要實現抽象類PreloadingStrategy和preload方法。在異步加載特征模塊和決定是否預加載它們時，路由器調用preload方法。 preload方法有兩個參數，第一個參數Route提供路由配置，第二個參數是預加載特征模塊的函數。

鏈接參數數組

鏈接參數數組保存路由導航時所需的成分：

1. 指向目標組件的那個路由的路徑（path）

2. 必備路由參數和可選路由參數，它們將進入該路由的URL

e.g.我們可以把RouterLink指令綁定到一個數組，就像這樣：

<a [routerLink]="['/heroes']">Heroes</a>

e.g.在指定路由參數時，我們寫過一個雙元素的數組，就像這樣：

this.router.navigate(['/hero', hero.id]);

e.g.我們可以在對象中提供可選的路由參數，就像這樣：

<a [routerLink]="['/crisis-center', { foo: 'foo' }]">Crisis Center</a>

以上是“Angular2中路由與導航的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！