iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Modern Web

新新新手閱讀 Angular 文件30天系列 第 27

新新新手閱讀 Angular 文件 - Router - pathMatch(1) - Day27

本文內容

本文為閱讀 Angular 的 Route 其中一項設定 pathMath 的筆記內容。

route

在 Angular 可以利用 route 來設定不同的路由路徑,應該要對應到什麼元件的內容。
route 是一個物件,它有很多屬性可以設定,都跟路由的應用有關,而大致上常用的為以下幾個:
path: 路由路徑
pathMatch: 路由路徑要以什麼樣的規則,來決定是否符合 path 的內容。可以設定的值有兩個: prefixfull
component: 用來指定當符合該路由路徑時,要呈現哪一個元件的內容
redirectTo: 會被重新導向哪一個路由路徑

route 詳細可以設定的屬性,都在官方文件可以找到,這邊就先不一一列出來了。

pathMatch

本篇會特別紀錄有關 route 的 pathMatch 的用法。
承如上面所說,pathMatch 是設定路由路徑要以什麼樣的規則,來判定該路徑符合 path 的內容。
它有兩個屬性值可以設定,分別為 prefix 和 full。 預設值為 prefix。

路由路徑機制

假設今天,我在本地端開發,有一個路徑長得像這樣
http://localhost:4200/users/Johnny/permission?from=134#section
先來解析一下這個路徑,看看,哪個部分才會被 Angular 拿來作為 route 比對的對象

  1. 最前面的 baseUrl: http://localhost:4200 不會被拿來作為 route 比對的對象
  2. 最後面接的內容,?from=134#section 是 queryParameter 也是不會用來作為 route 比對的對象,這部分的功能通常會用在要丟資料給後端,告訴他們我們想要訂資料的內容時會用到。

好,將以上說到不會被拿來比對的內容剔除後,路由路徑只剩下 /users/Johnny/permission ,這部分就是會被 Angular 來拿作為 route 比對的對象。

路由比對機制

  1. Angular 會把以上擷取完的路徑切成幾個獨立的部分,分別為 users, Johnny, permission 這三個部分,按照順序一個一個進行比對,也就是說先比對 users,接著,比對 Johnny,最後,比對 permission。
  2. Anuglar 中的 Router 本身是一個樹狀結構。在這個樹狀結構上,會分布不同的 route 物件,然後,每一個 route 物件又可能有自己的 children node ,繼續開支散葉下去。
    https://ithelp.ithome.com.tw/upload/images/20210927/20140093UISy0yTM5x.png
  3. 最終,Angular 會希望找到完全符合當下路由路徑內容的路由設定,以我們這邊的範例為例,Angular 會希望找到完全符合 /users/Johnny/permission 路徑的路由設定,假若,你的路由設定是符合 /users/Johnny 或者 /users/Johnny/permission/location,多一個或少一個,都是不被允許的,要完全符合才行。

Summary

這邊做個總結

  1. 我們可以透過 route 物件來設定,路由規則,與該路由路徑會對應到的元件內容。
  2. pathMatch 的屬性值,有兩個可以設定 prefix 和 full,預設值為 prefix。
  3. Angular 會將路由路徑以 / 為切分的斷點,並一個一個比對被切分出來的路由路徑。

Reference

  1. Angular - explain pathMath configuration
  2. Angular - Route - pathMath - official Docs

上一篇
新新新手閱讀 Angular 文件 - Component - ngOnDestroy(2) - Day26
下一篇
新新新手閱讀 Angular 文件 - Router - pathMatch(2) - Day28
系列文
新新新手閱讀 Angular 文件30天30

尚未有邦友留言

立即登入留言