Angular 路由器參考手冊

路由器參考手冊

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

路由器導入

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

從任何其它的 Angular 包中導入你需要的東西。

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

配置

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

在配置之前，路由器沒有任何路由。下面的例子創(chuàng)建了五個路由定義，通過 ?RouterModule.forRoot()? 方法配置路由器，并把結果添加到 ?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ù)組描述了如何導航。把它傳給模塊的 ?imports ?數(shù)組中的 ?RouterModule.forRoot()? 方法來配置路由器。

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

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

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

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

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

路由出口

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

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

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

路由鏈接

要想通過某些用戶操作（比如單擊一下 a 標簽）進行導航，請使用 ?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 標簽上的 ?RouterLink ?指令讓路由器可以控制這些元素。導航路徑是固定的，所以你可以給 ?routerLink ?賦值一個字符串（“一次性”綁定）。

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

活動路由鏈路

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

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

routerLinkActive="..."

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

[routerLinkActive]="someStringProperty"

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

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

路由器狀態(tài)

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

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

激活路由

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

路由器事件

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

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

路由器術語

這里是一些關鍵的 ?Router ?術語及其含義：