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

路由器參考手冊(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()? 方法來(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)目?？梢杂媒馕銎魇匦l(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)?nbsp;?/heroes? 時(shí)，路由器就會(huì)把這個(gè) URL 與路由路徑 ?/heroes? 匹配，并把 ?HeroListComponent ?作為兄弟元素顯示在宿主組件模板中的 ?RouterOutlet ?下方。

路由鏈接

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

考慮下面的模板：

<h1>Angular Router</h1>
<nav>
  <a routerLink="/crisis-center" routerLinkActive="active" ariaCurrentWhenActive="page">Crisis Center</a>
  <a routerLink="/heroes" routerLinkActive="active" ariaCurrentWhenActive="page">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è)字符串的組件屬性上，比如

[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 ?屬性來(lái)訪問當(dāng)前的 ?RouterState?。

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

激活路由

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

路由器事件

?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)。

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

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