路由器參考手冊

下面的部分重點介紹了一些路由器的核心概念。

路由器導(dǎo)入

Angular 的 Router 是一個可選服務(wù)，它為指定的 URL 提供特定的組件視圖。它不是 Angular 核心的一部分，因此它位于自己的包 ?@angular/router? 中。

從任何其它的 Angular 包中導(dǎo)入你需要的東西。

import { RouterModule, Routes } from '@angular/router';

配置

帶路由的 Angular 應(yīng)用中有一個 ?Router ?服務(wù)的單例實例。當瀏覽器的 URL 發(fā)生變化時，該路由器會查找相應(yīng)的 ?Route?，以便根據(jù)它確定要顯示的組件。

在配置之前，路由器沒有任何路由。下面的例子創(chuàng)建了五個路由定義，通過 ?RouterModule.forRoot()? 方法配置路由器，并把結(jié)果添加到 ?AppModule ?的 ?imports ?數(shù)組中。

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
    // other imports here
  ],
  ...
})
export class AppModule { }

?appRoutes ?路由數(shù)組描述了如何導(dǎo)航。把它傳給模塊的 ?imports ?數(shù)組中的 ?RouterModule.forRoot()? 方法來配置路由器。

每個 ?Route ?都會把一個 URL ?path ?映射到一個組件。路徑中沒有前導(dǎo)斜杠。路由器會為你解析并構(gòu)建最終的 URL，這樣你就可以在應(yīng)用視圖中導(dǎo)航時使用相對路徑和絕對路徑了。

第二個路由中的 ?:id? 是路由參數(shù)的令牌。在像 ?/hero/42? 這樣的 URL 中，“42”是 ?id ?參數(shù)的值。相應(yīng)的 ?HeroDetailComponent ?用這個值來查找并顯示 ?id ?為 42 的英雄。

第三個路由中的 ?data ?屬性是存放與該特定路由關(guān)聯(lián)的任意數(shù)據(jù)的地方。每個激活的路由都可以訪問 ?data ?屬性?？梢杂盟鼇泶鎯撁鏄祟}，面包屑文本和其它只讀靜態(tài)數(shù)據(jù)等項目?？梢杂媒馕銎魇匦l(wèi)來檢索動態(tài)數(shù)據(jù)。

第四個路由中的空路徑表示該應(yīng)用的默認路徑 - 當 URL 中的路徑為空時通常要去的地方，就像它在剛進來時一樣。這個默認路由重定向到了 ?/heroes? 這個 URL 的路由，因此會顯示 ?HeroesListComponent?。

如果你需要查看導(dǎo)航生命周期中發(fā)生了什么事件，可以把 ?enableTracing ?選項作為路由器默認配置的一部分。這會把每個導(dǎo)航生命周期中發(fā)生的每個路由器事件都輸出到瀏覽器控制臺中。?enableTracing ?只會用于調(diào)試目的。你可以把 ?enableTracing: true? 選項作為第二個參數(shù)傳給 ?RouterModule.forRoot()? 方法。

路由出口

?RouterOutlet ?是一個來自路由器庫的指令，雖然它的用法像組件一樣。它充當占位符，用于在模板中標記出路由器應(yīng)該顯示把該組件顯示在那個出口的位置。

對于上面的配置，當這個應(yīng)用的瀏覽器 URL 變?yōu)?nbsp;?/heroes? 時，路由器就會把這個 URL 與路由路徑 ?/heroes? 匹配，并把 ?HeroListComponent ?作為兄弟元素顯示在宿主組件模板中的 ?RouterOutlet ?下方。

路由鏈接

要想通過某些用戶操作（比如單擊一下 a 標簽）進行導(dǎo)航，請使用 ?RouterLink?。

考慮下面的模板：

Angular Router

a 標簽上的 ?RouterLink ?指令讓路由器可以控制這些元素。導(dǎo)航路徑是固定的，所以你可以給 ?routerLink ?賦值一個字符串（“一次性”綁定）。

如果導(dǎo)航路徑更加動態(tài)，你可以給它綁定到一個模板表達式，該表達式要返回一個鏈接參數(shù)數(shù)組。路由器會把該數(shù)組解析成一個完整的 URL。

活動路由鏈路

?RouterLinkActive ?指令會根據(jù)當前的 ?RouterState ?切換活動 ?RouterLink ?上所綁定的 CSS 類。

在每個 a 標簽上，你會看到一個到 ?RouterLinkActive ?指令的屬性綁定，就像

routerLinkActive="..."

等號 ?=? 右側(cè)的模板表達式，包含一個以空格分隔的 CSS 類字符串，當這個鏈接處于活動狀態(tài)時，路由器就會加上這些字符串（并在非活動狀態(tài)時刪除）。你可以把 ?RouterLinkActive ?指令設(shè)置成一串類的字符串，比如 ?routerLinkActive="active fluffy"?，也可以把它綁定到一個返回這樣一個字符串的組件屬性上，比如

[routerLinkActive]="someStringProperty"

活動路由鏈接會級聯(lián)到路由樹的每個級別，這樣父路由和子路由鏈接就可以同時處于活動狀態(tài)。要覆蓋這種行為，可以用 ?{ exact: true }? 表達式綁定到 ?[routerLinkActiveOptions]? 輸入綁定。使用 ?{ exact: true }? 之后，給定的 ?RouterLink ?只有在 URL 與當前 URL 完全匹配時才會激活。

?RouterLinkActive ?還允許你輕松地將 ?aria-current? 屬性應(yīng)用于活躍元素，從而為所有用戶提供更易于訪問的體驗。

路由器狀態(tài)

每個成功的導(dǎo)航生命周期結(jié)束后，路由器都會構(gòu)建一個 ?ActivatedRoute ?對象樹，它構(gòu)成了路由器的當前狀態(tài)。你可以從任何地方使用應(yīng)用的 ?Router ?服務(wù)和 ?routerState ?屬性來訪問當前的 ?RouterState?。

?RouterState ?中的每個 ?ActivatedRoute ?都提供了向上或向下遍歷路由樹的方法，用于從父路由、子路由和兄弟路由中獲取信息。

激活路由

路由的路徑和參數(shù)可以通過注入名為 ?ActivatedRoute ?的路由服務(wù)獲得。它提供了大量有用的信息，包括：

屬性	詳情
url	一個路由路徑的 Observable，是一個由路由路徑的各個部分組成的字符串數(shù)組。
data	包含提供給當前路由的 data 對象的 Observable。也包含任何由解析守衛(wèi)解析出的值。
params	Observable 可以包含此路由的必選和可選參數(shù)。
paramMap	一個包含該路由的必要參數(shù)和可選參數(shù) map 的 Observable。這個 map 支持從同一個參數(shù)中獲得單個或多個值。
queryParamMap	一個包含適用于所有路由的查詢參數(shù) map 的 Observable。這個 map 支持從同一個查詢參數(shù)中獲得單個或多個值。
queryParams	Observable 可以包含對所有路由都可用的查詢參數(shù)。
fragment	一個適用于所有路由的 URL 片段的 Observable。
outlet	用來渲染該路由的 RouterOutlet 的名字。對于無名出口，這個出口的名字是 primary。
routeConfig	包含原始路徑的那個路由的配置信息。
parent	當該路由是子路由時，表示該路由的父級 ActivatedRoute。
firstChild	包含該路由的子路由列表中的第一個 ActivatedRoute。
children	包含當前路由下所有激活的子路由。

路由器事件

?Router ?在每次導(dǎo)航過程中都會通過 ?Router.events? 屬性發(fā)出導(dǎo)航事件。這些事件的范圍貫穿從導(dǎo)航開始和結(jié)束之間的多個時間點。導(dǎo)航事件的完整列表如下表所示。

路由事件	詳情
?NavigationStart?	開始導(dǎo)航時觸發(fā)。
?RouteConfigLoadStart?	路由器惰性加載某個路由配置之前觸發(fā)。
?RouteConfigLoadEnd?	某個路由惰性加載完畢后觸發(fā)。
?RoutesRecognized?	路由器解析完 URL，并且識別出路由時觸發(fā)。
?GuardsCheckStart?	路由器開始執(zhí)行路由守衛(wèi)時觸發(fā)。
?ChildActivationStart?	路由器開始激活某個路由的子路由時觸發(fā)。
?ActivationStart?	路由器開始激活某個路由時觸發(fā)。
?GuardsCheckEnd?	路由器完全完成了路由守衛(wèi)階段時觸發(fā)。
?ResolveStart?	路由器開始路由解析（Resolve）階段時觸發(fā)。
?ResolveEnd?	路由器成功完成了路由解析（Resolve）階段時觸發(fā)。
?ChildActivationEnd?	路由器激活完某個路由的子路由時觸發(fā)。
?ActivationEnd?	路由器正在激活某個路由時觸發(fā)。
?NavigationEnd?	導(dǎo)航成功結(jié)束時觸發(fā)。
?NavigationCancel?	導(dǎo)航被取消時觸發(fā)。這可能是因為在導(dǎo)航期間某個路由守衛(wèi)返回了 false 或通過返回 UrlTree 而進行了重定向。
?NavigationError?	當導(dǎo)航因為非預(yù)期的錯誤而失敗時觸發(fā)。
?Scroll?	表示一個滾動事件。

當啟用了 ?enableTracing ?選項時，Angular 會把這些事件都記錄到控制臺。

路由器術(shù)語

這里是一些關(guān)鍵的 ?Router ?術(shù)語及其含義：

路由器部件	詳情
Router	為活動 URL 顯示應(yīng)用中的組件。管理從一個組件到另一個的導(dǎo)航。
RouterModule	一個單獨的 NgModule，它提供了一些必要的服務(wù)提供者和一些用于在應(yīng)用視圖間導(dǎo)航的指令。
Routes	定義一個路由數(shù)組，每一個條目都會把一個 URL 路徑映射到組件。
Route	定義路由器如何基于一個 URL 模式導(dǎo)航到某個組件。大部分路由都由一個路徑和一個組件類組成。
RouterOutlet	該指令 () 用于指出路由器應(yīng)該把視圖顯示在哪里。
RouterLink	用于將可點擊的 HTML 元素綁定到某個路由的指令。單擊帶有 routerLink 指令且綁定到字符串或鏈接參數(shù)數(shù)組的元素，將觸發(fā)導(dǎo)航。
RouterLinkActive	當包含在元素上或內(nèi)部的關(guān)聯(lián) routerLink 變?yōu)榛顒?非活動狀態(tài)時，用于從 HTML 元素添加/刪除類的指令。它還可以設(shè)置活動鏈接的 aria-current 以獲得更好的無障礙性。
ActivatedRoute	一個提供給每個路由組件的服務(wù)，其中包含當前路由專屬的信息，比如路由參數(shù)、靜態(tài)數(shù)據(jù)、解析數(shù)據(jù)、全局查詢參數(shù)和全局片段。
RouterState	路由器的當前狀態(tài)，包括一棵當前激活路由的樹以及遍歷這棵路由樹的便捷方法。
鏈接參數(shù)數(shù)組	一個由路由器將其解釋為路由指南的數(shù)組。你可以將該數(shù)組綁定到 RouterLink 或?qū)⒃摂?shù)組作為參數(shù)傳給 Router.navigate 方法。
路由組件	一個帶有 RouterOutlet 的 Angular 組件，可基于路由器的導(dǎo)航來顯示視圖。

當前名稱：創(chuàng)新互聯(lián)Angular教程：Angular路由器參考手冊
網(wǎng)站地址：http://www.dlmjj.cn/article/dpgcpgd.html