Angular9 路由器參考手冊(cè)

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

路由器導(dǎo)入

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

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

Path："src/app/app.module.ts (import)" 。

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

有關(guān)瀏覽器 URL 風(fēng)格的更多信息，請(qǐng)參閱 LocationStrategy 和瀏覽器的網(wǎng)址樣式。

配置

帶路由的 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ù)組中。

Path："src/app/app.module.ts (excerpt)" 。

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() 方法來(lái)配置路由器。

每個(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è)值來(lái)查找并顯示 id 為 42 的英雄。

第三個(gè)路由中的 data 屬性是存放與該特定路由關(guān)聯(lián)的任意數(shù)據(jù)的地方。每個(gè)激活的路由都可以訪問 data 屬性。可以用它來(lái)存儲(chǔ)頁(yè)面標(biāo)題，面包屑文本和其它只讀靜態(tài)數(shù)據(jù)等項(xiàng)目。你可以嘗試使用解析器守衛(wèi)來(lái)檢索動(dòng)態(tài)數(shù)據(jù)。

第四個(gè)路由中的空路徑表示該應(yīng)用的默認(rèn)路徑 - 當(dāng) URL 中的路徑為空時(shí)通常要去的地方，就像它在剛進(jìn)來(lái)時(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è)來(lái)自路由器庫(kù)的指令，雖然它的用法像組件一樣。它充當(dāng)占位符，用于在模板中標(biāo)記出路由器應(yīng)該顯示把該組件顯示在那個(gè)出口的位置。

<router-outlet></router-outlet>
<!-- Routed components go here -->

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

路由鏈接

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

考慮下面的模板：

Path："src/app/app.component.html " 。

<h1>Angular Router</h1>
<nav>
  <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
  <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>
<router-outlet></router-outlet>

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è)字符串的組件屬性上。

活動(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ì)激活。

路由器狀態(tài)

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

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

激活路由

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

還有兩個(gè)較舊的屬性，但更推薦使用它們的替代品，因?yàn)樗鼈兛赡軙?huì)在以后的 Angular 版本中棄用。

- `params` ：一個(gè) `Observable`，它包含專屬于該路由的必要參數(shù)和可選參數(shù)。請(qǐng)改用 `paramMap`。

- `queryParams`：一個(gè)包含可用于所有路由的查詢參數(shù)的 `Observable`。請(qǐng)改用 `queryParamMap`。

路由器事件

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

當(dāng)啟用了 enableTracing 選項(xiàng)時(shí)，Angular 會(huì)把這些事件都記錄到控制臺(tái)。有關(guān)篩選路由器導(dǎo)航事件的示例，請(qǐng)參閱 Angular 中的 Observables 一章的路由器部分。

路由器術(shù)語(yǔ)

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