路由器參考手冊(cè)

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

路由器導(dǎo)入

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

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

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

配置

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

在配置之前，路由器沒有任何路由。下面的例子創(chuàng)建了五個(gè)路由定義，通過 ?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()? 方法來配置路由器。

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

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

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

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

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

路由出口

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

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

路由鏈接

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

考慮下面的模板：

Angular Router

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

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

活動(dòng)路由鏈路

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

在每個(gè) a 標(biāo)簽上，你會(huì)看到一個(gè)到 ?RouterLinkActive ?指令的屬性綁定，就像

routerLinkActive="..."

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

[routerLinkActive]="someStringProperty"

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

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

路由器狀態(tài)

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

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

激活路由

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

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

路由器事件

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

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

當(dāng)啟用了 ?enableTracing ?選項(xiàng)時(shí)，Angular 會(huì)把這些事件都記錄到控制臺(tái)。

路由器術(shù)語

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

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

新聞標(biāo)題：創(chuàng)新互聯(lián)Angular教程：Angular路由器參考手冊(cè)
網(wǎng)站地址：http://www.fisionsoft.com.cn/article/dpgcpgd.html