Angular9 路由器參考手冊

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

路由器導(dǎo)入

Angular 的 Router 是一個可選服務(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)格的更多信息，請參閱 LocationStrategy 和瀏覽器的網(wǎng)址樣式。

配置

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

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

每個 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 屬性?？梢杂盟鼇泶鎯撁鏄?biāo)題，面包屑文本和其它只讀靜態(tài)數(shù)據(jù)等項目。你可以嘗試使用解析器守衛(wèi)來檢索動態(tài)數(shù)據(jù)。

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

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

路由出口

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

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

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

路由鏈接

要想通過某些用戶操作（比如單擊一下 a 標(biāo)簽）進行導(dǎo)航，請使用 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 賦值一個字符串（“一次性”綁定）。

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

活動路由鏈路

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

在每個 a 標(biāo)簽上，你會看到一個到 RouterLinkActive 指令的屬性綁定，就像 routerLinkActive="..."。

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

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

路由器狀態(tài)

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

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

激活路由

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

還有兩個較舊的屬性，但更推薦使用它們的替代品，因為它們可能會在以后的 Angular 版本中棄用。

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

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

路由器事件

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

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

路由器術(shù)語

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