Angular 路由

概述

路由所要解決的核心問題就是經過創建URL和頁面的對應關係，使得不一樣的頁面能夠用不一樣的URL來表示。

Angular路由的核心工做流程圖

• 首先，當用戶在瀏覽器上輸入URL後，Angular將獲取該URL並將其解析生成一個UrlTree實例
• 其次，在路由配置中尋找並激活與UrlTree實例匹配的配置項
• 再次，爲配置項中指定的組件建立實例
• 最後，將該組件渲染於路由組件的模板中<router-outlet>指令所在的位置

基本用法

Angular路由最爲基本的用法是將一個URL所對應的組件在頁面中顯示出來。要作到這一點，有三個必不可少的步驟，分別是建立根路由模塊、定義路由配置、添加<router-outlet>指令標籤。

建立根路由模塊

根路由模塊包含了路由所須要的各項服務，是路由工做流程得以正常執行的基礎。

下面的代碼以路由配置rootRouterConfig爲參數，經過調用RouterModule.forRoot()方法來建立根路由模塊，並將其導入到應用的根模塊AppModule中。

app-routing.module.ts

const rootRouterConfig: Routes = [
  {
    path: 'add',
    component: AddComponent,
  },
  {
    path: 'list',
    component: ListComponent,
  },
  {
    path: '',
    redirectTo: 'add',
    pathMatch: 'full',
  },
  {
    path: '**',
    redirectTo: 'add',
    pathMatch: 'full',
  }
];

@NgModule({
  imports: [RouterModule.forRoot(rootRouterConfig)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

• path 不能以斜槓 / 開頭
• ** 通配符路由，不知足以上路徑時，選擇此路由

路由策略

HashLocationStrategy

http://localhost:4200/#/add

HashLocationStrategy是Angular路由最爲常見的策略，其原理是利用了瀏覽器在處理hash部分的特性

瀏覽器向服務器發送請求時不會帶上hash部分的內容，更換URL的hash部分不會向服務器從新發送請求，這使得在進行跳轉的時候不會引起頁面的刷新和應用的從新加載

使用該策略，只須要在注入路由服務時使用useHash屬性進行顯示指定便可

app-routing.module.ts

@NgModule({
  imports: [RouterModule.forRoot(rootRouterConfig, { useHash: true })],
  exports: [RouterModule]
})

HashLocationStrategy

路由跳轉

Web應用中的頁面跳轉，指的是應用響應某個事件，從一個頁面跳轉到另外一個頁面的行爲。對於Angular構建的單頁面而言，頁面跳轉實質上就是從一個配置項跳轉到另外一個配置項的行爲。

指令跳轉

指令跳轉經過使用RouterLink指令來完成，該指令接收一個連接參數數組，Angular將根據該數組生成UrlTree實例進行跳轉

<div [routerLink]="['/add']" routerLinkActive="add" >add</div>
<div [routerLink]="['/list']" routerLinkActive="list" >list</div>

第一個參數名可使用 /、./ 或 ../ 前綴

• 若是第一個片斷用 / 開頭，則路由器會從應用的根路由開始查找
• 若是第一個片斷用 ./ 開頭或者沒有用斜槓開頭，路由器就會從當前激活路由開始查找
• 若是第一個片斷以 ../ 開頭，則路由器將會向上找一級

RouterLink指令能夠被應用到任何HTML元素上，使得頁面跳轉不須要依賴超連接。

代碼跳轉

RouterLink指令經過響應click事件實現頁面跳轉，若是須要響應其餘事件或者根據運行時動態跳轉，則能夠經過Router.navigateByUrl或Router.navigate來完成。

add() {
    this.router.navigateByUrl('/add');
}

list() {
    this.router.navigate(['/list']);
}

路由參數

Path參數

Path參數經過解析URL的path部分來獲取參數。

在定義一個配置項的path屬性時，可使用/字符來對path屬性進行分段，若是一個分段以:字符開頭，則URL中與該分段進行匹配的部分將做爲參數傳遞給組件中。

app-routing.module.ts

const rootRouterConfig: Routes = [
  {
    path: 'add/:id/:name/:age/:sex',
    component: DetailComponent,
  }
];

<div [routerLink]="['detail', 1, 'tao', 30, 'man']"
     routerLinkActive="detail">detail 1 tao1 30 man</div>

在組件中獲取Path參數，須要導入ActivatedRoute服務，該服務提供了兩種方式處理頁面之間的跳轉。

不一樣頁面

Angular應用從一個頁面跳轉到另外一個新的頁面，實質就是從一個配置項跳轉到另外一個配置項。在這個過程當中，Angular除了會爲配置項所對應的組件建立實例外，還會爲該配置項建立一個ActivatedRoute實例來表示該配置項已被激活，該ActivatedRoute實例包含一個快照(snapshot)，記錄了從當前URL解析出來的全部path參數。

ngOnInit() {
    console.log(this.activatedRouter.snapshot.params);
  }

{id: "1", name: "tao", age: "30", sex: "man"}

同一頁面

Angular在處理同一頁面時，不會重現建立組件的實例，因此構造函數和ngOnInit()方法不會被調用。雖然Angular會將快照中參數更新，可是沒有將值更新到組件。爲了解決這個問題，ActivatedRoute服務提供了一個Observable對象，容許對參數的更新進行訂閱。組件銷燬的時候要取消訂閱。

this.activatedRouter.params.subscribe(value => {
      console.log(value)；
})

ngOnDestroy() {
    this.sub.unsubscribe();
}

Query參數

因爲URL的query部分不用和配置項進行匹配，所以每個配置項能夠擁有任意多個查詢參數。

http://localhost:4200/list?limit=10

Query參數一樣能夠經過RouterLink指令或者跳轉方法來賦值

<div [routerLink]="['detail']" [queryParams]="{'limit': 10}">>detail limit 10</div>
<div [routerLink]="['detail']" [queryParams]="{'limit': 10}">>detail limit 30</div>

Query參數的獲取，須要藉助ActivatedRoute服務提供的Observable對象的queryParams來完成。

this.sub2 = this.activatedRouter.queryParams.subscribe(value => {
      console.log(value);
    })

// {limit: "10"}

路由攔截