摘要：要做到這一點(diǎn)，有三個(gè)必不可少的步驟，分別是創(chuàng)建根路由模塊定義路由配置添加指令標(biāo)簽。下面的代碼以路由配置為參數(shù)，通過(guò)調(diào)用方法來(lái)創(chuàng)建根路由模塊，并將其導(dǎo)入到應(yīng)用的根模塊中。

路由所要解決的核心問(wèn)題就是通過(guò)建立URL和頁(yè)面的對(duì)應(yīng)關(guān)系，使得不同的頁(yè)面可以用不同的URL來(lái)表示。

Angular路由的核心工作流程圖

首先，當(dāng)用戶在瀏覽器上輸入U(xiǎn)RL后，Angular將獲取該URL并將其解析生成一個(gè)UrlTree實(shí)例

其次，在路由配置中尋找并激活與UrlTree實(shí)例匹配的配置項(xiàng)

再次，為配置項(xiàng)中指定的組件創(chuàng)建實(shí)例

最后，將該組件渲染于路由組件的模板中指令所在的位置

Angular路由最為基本的用法是將一個(gè)URL所對(duì)應(yīng)的組件在頁(yè)面中顯示出來(lái)。要做到這一點(diǎn)，有三個(gè)必不可少的步驟，分別是創(chuàng)建根路由模塊、定義路由配置、添加指令標(biāo)簽。

根路由模塊包含了路由所需要的各項(xiàng)服務(wù)，是路由工作流程得以正常執(zhí)行的基礎(chǔ)。

下面的代碼以路由配置rootRouterConfig為參數(shù)，通過(guò)調(diào)用RouterModule.forRoot()方法來(lái)創(chuàng)建根路由模塊，并將其導(dǎo)入到應(yīng)用的根模塊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 不能以斜杠 / 開(kāi)頭

** 通配符路由，不滿足以上路徑時(shí)，選擇此路由

http://localhost:4200/#/add

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

瀏覽器向服務(wù)器發(fā)送請(qǐng)求時(shí)不會(huì)帶上hash部分的內(nèi)容，更換URL的hash部分不會(huì)向服務(wù)器重新發(fā)送請(qǐng)求，這使得在進(jìn)行跳轉(zhuǎn)的時(shí)候不會(huì)引發(fā)頁(yè)面的刷新和應(yīng)用的重新加載

使用該策略，只需要在注入路由服務(wù)時(shí)使用useHash屬性進(jìn)行顯示指定即可

app-routing.module.ts

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

Web應(yīng)用中的頁(yè)面跳轉(zhuǎn)，指的是應(yīng)用響應(yīng)某個(gè)事件，從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面的行為。對(duì)于Angular構(gòu)建的單頁(yè)面而言，頁(yè)面跳轉(zhuǎn)實(shí)質(zhì)上就是從一個(gè)配置項(xiàng)跳轉(zhuǎn)到另一個(gè)配置項(xiàng)的行為。

指令跳轉(zhuǎn)通過(guò)使用RouterLink指令來(lái)完成，該指令接收一個(gè)鏈接參數(shù)數(shù)組，Angular將根據(jù)該數(shù)組生成UrlTree實(shí)例進(jìn)行跳轉(zhuǎn)

add
list

第一個(gè)參數(shù)名可以使用 /、./ 或 ../ 前綴

如果第一個(gè)片段用 / 開(kāi)頭，則路由器會(huì)從應(yīng)用的根路由開(kāi)始查找

如果第一個(gè)片段用 ./ 開(kāi)頭或者沒(méi)有用斜杠開(kāi)頭，路由器就會(huì)從當(dāng)前激活路由開(kāi)始查找

如果第一個(gè)片段以 ../ 開(kāi)頭，則路由器將會(huì)向上找一級(jí)

RouterLink指令可以被應(yīng)用到任何HTML元素上，使得頁(yè)面跳轉(zhuǎn)不需要依賴超鏈接。

RouterLink指令通過(guò)響應(yīng)click事件實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)，如果需要響應(yīng)其他事件或者根據(jù)運(yùn)行時(shí)動(dòng)態(tài)跳轉(zhuǎn)，則可以通過(guò)Router.navigateByUrl或Router.navigate來(lái)完成。

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

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

Path參數(shù)通過(guò)解析URL的path部分來(lái)獲取參數(shù)。

在定義一個(gè)配置項(xiàng)的path屬性時(shí)，可以使用/字符來(lái)對(duì)path屬性進(jìn)行分段，如果一個(gè)分段以:字符開(kāi)頭，則URL中與該分段進(jìn)行匹配的部分將作為參數(shù)傳遞給組件中。

app-routing.module.ts

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

detail 1 tao1 30 man

在組件中獲取Path參數(shù)，需要導(dǎo)入ActivatedRoute服務(wù)，該服務(wù)提供了兩種方式處理頁(yè)面之間的跳轉(zhuǎn)。

Angular應(yīng)用從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)新的頁(yè)面，實(shí)質(zhì)就是從一個(gè)配置項(xiàng)跳轉(zhuǎn)到另一個(gè)配置項(xiàng)。在這個(gè)過(guò)程中，Angular除了會(huì)為配置項(xiàng)所對(duì)應(yīng)的組件創(chuàng)建實(shí)例外，還會(huì)為該配置項(xiàng)創(chuàng)建一個(gè)ActivatedRoute實(shí)例來(lái)表示該配置項(xiàng)已被激活，該ActivatedRoute實(shí)例包含一個(gè)快照(snapshot)，記錄了從當(dāng)前URL解析出來(lái)的所有path參數(shù)。

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

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

Angular在處理同一頁(yè)面時(shí)，不會(huì)重現(xiàn)創(chuàng)建組件的實(shí)例，所以構(gòu)造函數(shù)和ngOnInit()方法不會(huì)被調(diào)用。雖然Angular會(huì)將快照中參數(shù)更新，但是沒(méi)有將值更新到組件。為了解決這個(gè)問(wèn)題，ActivatedRoute服務(wù)提供了一個(gè)Observable對(duì)象，允許對(duì)參數(shù)的更新進(jìn)行訂閱。組件銷毀的時(shí)候要取消訂閱。

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

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

由于URL的query部分不用和配置項(xiàng)進(jìn)行匹配，因此每一個(gè)配置項(xiàng)可以擁有任意多個(gè)查詢參數(shù)。

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

Query參數(shù)同樣可以通過(guò)RouterLink指令或者跳轉(zhuǎn)方法來(lái)賦值

>detail limit 10
>detail limit 30

Query參數(shù)的獲取，需要借助ActivatedRoute服務(wù)提供的Observable對(duì)象的queryParams來(lái)完成。

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

// {limit: "10"}