Angular 5.0 學習6：路由概念篇

時間 2020-07-26

原文原文鏈接

1.路由與導航概覽

在用戶使用應用程序時，Angular的路由器能讓用戶從一個視圖導航到另外一個視圖。
瀏覽器具備咱們熟悉的導航模式：html

在地址欄輸入URL，瀏覽器就會導航到相應的頁面。
在頁面中點擊連接，瀏覽器就會導航到一個新頁面。
點擊瀏覽器的前進和後退按鈕，瀏覽器就會在你的瀏覽歷史中向前或向後導航。

Angular的Router（即「路由器」）借鑑了這個模型。它把瀏覽器中的URL看作一個操做指南，據此導航到一個由客戶端生成的視圖，並能夠把參數傳給支撐視圖的相應組件，幫它決定具體該展示哪些內容。咱們能夠爲頁面中的連接綁定一個路由，這樣，當用戶點擊連接時，就會導航到應用中相應的視圖。當用戶點擊按鈕、從下拉框中選取，或響應來自任何地方的事件時，咱們也能夠在代碼控制下進行導航。路由器還在瀏覽器的歷史日誌中記錄下這些活動，這樣瀏覽器的前進和後退按鈕也能照常工做。數組

2.<base href> 元素

大多數帶路由的應用都要在index.html的<head>標籤下先添加一個<base>元素，來告訴路由器該如何合成導航用的URL。瀏覽器

若是app文件夾是該應用的根目錄，那就把href的值設置爲下面這樣：app

<base href="/">

3.從路由庫中導入

Angular的路由器是一個可選的服務，它用來呈現指定的URL所對應的視圖。它並非Angular核心庫的一部分，而是在它本身的@angular/router包中。像其它Angular包同樣，咱們能夠從它導入所需的一切。url

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

經常使用：
spa

路由配置 Routes

每一個帶路由的Angular應用都有一個Router（路由器）服務的單例對象。當瀏覽器的URL變化時，路由器會查找對應的Route（路由），並據此決定該顯示哪一個組件。debug

路由器須要先配置纔會有路由信息。下面的例子建立了四個路由定義，並用RouterModule.forRoot方法來配置路由器，並把它的返回值添加到AppModule的imports數組中。日誌

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 { }

路由出口 Router outlet

有了這份配置，當本應用在瀏覽器中的URL變爲/heroes時，路由器就會匹配到path爲heroes的Route，並在宿主視圖中的RouterOutlet以後顯示HeroListComponent組件。code

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

路由器連接 Router link

如今，咱們已經有了配置好的一些路由，還找到了渲染它們的地方，但又該如何導航到它呢？當然，從瀏覽器的地址欄直接輸入URL也能作到，可是大多數狀況下，導航是某些用戶操做的結果，好比點擊一個A標籤。component

<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標籤上的RouterLink指令讓路由器得以控制這個a元素。這裏的導航路徑是固定的，所以能夠把一個字符串賦給routerLink（「一次性」綁定）。

若是須要更加動態的導航路徑，那就把它綁定到一個返回連接參數數組的模板表達式。路由器會把這個數組解析成完整的URL。

每一個a標籤上的RouterLinkActive指令能夠幫用戶在外觀上區分出當前選中的「活動」路由。當與它關聯的RouterLink被激活時，路由器會把CSS類active添加到這個元素上。咱們能夠把該指令添加到a元素或它的父元素上。

路由器狀態

在導航時的每一個生命週期成功完成時，路由器會構建出一個ActivatedRoute組成的樹，它表示路由器的當前狀態。咱們能夠在應用中的任何地方用Router服務及其routerState屬性來訪問當前的RouterState值。

路由器狀態爲咱們提供了從任意激活路由開始向上或向下遍歷路由樹的一種方式，以得到關於父、子、兄弟路由的信息。

激活的路由 Activated route

該路由的路徑和參數能夠經過注入進來的一個名叫ActivatedRoute的路由服務來獲取。它有一大堆有用的信息，如路由地址，路由參數等。

url 路由路徑的Observable對象，是一個由路由路徑中的各個部分組成的字符串數組。
data 一個Observable，其中包含提供給路由的data對象。也包含由解析守衛（resolve guard）解析而來的值。
paramMap 一個Observable，其中包含一個由當前路由的必要參數和可選參數組成的map對象。用這個map能夠獲取來自同名參數的單一值或多重值。
queryParamMap 一個Observable，其中包含一個對全部路由都有效的查詢參數組成的map對象。用這個map能夠獲取來自查詢參數的單一值或多重值。
fragment An Observable of the URL fragment available to all routes.
outlet 要把該路由渲染到的RouterOutlet的名字。對於無名路由，它的路由名是primary，而不是空串。
routeConfig 用於該路由的路由配置信息，其中包含原始路徑。
parent 當該路由是一個子路由時，表示該路由的父級ActivatedRoute。
firstChild 包含該路由的子路由列表中的第一個ActivatedRoute。
children 包含當前路由下全部已激活的子路由。