iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Modern Web

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

新新新手閱讀 Angular 文件 - Router - pathMatch(2) - Day28

本文內容

接續,Day27 的內容,紀錄閱讀有關 Angular Route 的 pathMatch:prefix 設定內容。

Default (Prefix) path matching strategy

在昨天的文章中,有提到過 pathMatch 設定值有兩個,一個是 prefix,另一個是 full。預設值為 prefix。

prefix 曖昧的字義/images/emoticon/emoticon02.gif

prefix 這個字本身是前綴詞的意思,我一開始看到這個設定的時候,很容易誤以為,是不是該路由設定只要符合被比對路由路徑的 "前面" 某個部分,就算符合呢?
但...其實不是,在 pathMatch:prefix 的設定下,代表要完全符合被比對路由路徑,才算符合。
什麼意思呢,還記得昨天被解析出來的被比對路由路徑的內容嗎? /users/Johnny/permission,代表要完全符合這個路徑內容,才算符合喔,缺一不可。

開始比對~

好,解釋完 pathMatch:prefix 的比對機制之後,我就拿被比對路由路徑 /users/Johnny/permission 為對象,並用下列的 route 設定來進行比對
[Route 設定]

const routes: Routes = [
  {
    path: 'products',
    children: [
      {
        path: ':productID',
        component: ProductComponent,
      },
    ],
  },
  {
    path: ':other',
    children: [
      {
        path: 'ramble',
        component: rambleComponent,
      },
    ],
  },
  {
    path: 'user',
    component: userComponent,
  },
  {
    path: 'users',
    children: [
      {
        path: 'authority',
        component: customersAuthorityComponent,
      },
      {
        path: ':customerID',
        children: [
          {
            path: 'comments',
            component: customerCommentsComponent,
          },
          {
            path: 'permission',
            component: customerPermissionComponent,
          },
        ],
      },
    ],
  },
];

ok,可以看到上面的路由設定都沒有特別寫出 pathMatch 的設定內容,那它的設定就是預設值 prefix。

step1. 拆分路由
Angular 在比對路徑的時候,會把它拆分成一部分一部分,然後依序比對,所以,這邊的被比對路徑為 /users/Johnny/permissions,那它就會被拆成三等份,
一 - users
二 - Johnny
三 - permissions
由上到下,依序比對它們。

step2. 開始比對
ok,拆分完之後,就開始比對吧。
首先,比對 users
第一個 route 物件的 path 是 products,而 products !== users ,所以,這個不符合,下面一位~~

第二個 route 物件的 path 是 :other ,這個前面有接 : 的路由是動態路由,所以,它可以是任何值,所以,過關。
接著,比對它的子路由 path 是 ramble。它跟被比對路由的第二個部分 Johnny 不一樣,所以,這個不符合。

第三個 route 物件的 path 是 user,而 user !== users ,所以,這個不符合。

第四個 route 物件的 path 是 users,過關。
再來它的第一個子路由 path 是 authority ,這個不符合。
換下一個子路由 path 是 :customerID ,它是動態路由,所以可以接受任何值,所以,過關。
最後,再進它的子路由 path 是 comments,這個不符合。換另一個子路由 path 是 permission,過關 !!!!

所以,經過以上的重重重重的比對之後,我們知道,是最後一組的 route 物件的路由路徑設定內容與被比對路由路徑完全相同,所以,最後,會被渲染到畫面上的元件內容為 customerPermissionComponent。

Summary

來做個總結

  1. Anuglar 會把比對的路由拆解成好幾份,然後,依序比對每一個部分。
  2. pathMatch:prefix 時,要完全符合整個路由路徑,才能判定該路由規則完全符合。

上一篇
新新新手閱讀 Angular 文件 - Router - pathMatch(1) - Day27
下一篇
新新新手閱讀 Angular 文件 - pathMatch(3) - Day29
系列文
新新新手閱讀 Angular 文件30天30

尚未有邦友留言

立即登入留言