在實作裡，很多時後我們會將一些必要資訊記錄在網址上，直接在網址裡就能得到我們要的訊息
不用再透過組件將資訊層層傳遞，達到解耦合的效果。

URL

註：一切一切 都只是我用來舉例，不代表為鐵人賽網址真正的實際規劃哦！

例如：我的鐵人賽主題網址為
https://ithelp.ithome.com.tw/users/20093270/ironman/4623?page=2

我們試著將網址解析出

user => 使用者
20093270 => 使用者編號
ironman => 鐵人賽檔案
4623 => 鐵人賽主題編號

page => 我正在第 2 頁

從這裡可以推測出來，我們可以利用上面的編號去打 API 得到我們需要的資料，或是將這些資料的資料顯示在頁面上

route 規劃

由此可得知，我們可以將 route 做這樣的規劃

const routes: Routes = [
  {
    path: "user/:userId",
    component: UserComponent,
    children: [
      {
        path: "ironman",
        component: IronmanComponent,
        children: [
          {
            path: ":ironmanId",
            component: IronmanListComponent,
          },
        ],
      },
    ],
  },
  {
    path: "**",
    redirectTo: "user/:userId",
  },
];

可以看到 有些 path 上的設裡有加「:」，這個代表變數

設定網址連結

當我們架構寫出來後，實作上就可以開始使用了

html 設定網址連結

在 html 上 可以這樣寫

<a
  [routerLink]="['user', userId, 'ironman', ironmanId]"
  [queryParams]="{ page: pageNum }"
  >Angular 常見問題大小事 列表</a
>

ts 設定網址連結

在 ts 裡的寫法為

// 將 Router 注入
constructor(private router: Router) { }

this.router.navigate(
  ['user', userId, 'ironman', ironmanId], {
    queryParams: { page: pageNum }
  }
);

若是要加上其他額外的資訊，在不影響其他網址的情況下，可以這麼做

this.router.navigate([], {
  queryParams: { msg: "newMsg" },
  queryParamsHandling: "merge",
});

得到的網址就會變成
https://ithelp.ithome.com.tw/users/20093270/ironman/4623?page=2&msg=newMsg

QueryParamsHandling

取得網址上的資訊

path 路徑取得

在 UserComponent 裡執行
取得 userId 與 ironmanId

constructor(private activatedRoute: ActivatedRoute) { }

// userId
this.activatedRoute.paramMap.subscribe( (params: Params) => {
  console.log( 'userId', params.get('userId') )
})

// ironmanId

this.activatedRoute.firstChild?.firstChild?.paramMap.subscribe( (params: Params) => {
  console.log( 'ironmanId', params.get('ironmanId') )
})

因為 ironmanId 設定在 UserComponent 的下下一層，所以使用了兩次 firstChild

query 參數

this.activatedRoute.queryParamMap.subscribe((params: Params) => {
  console.log("page", params.get("page"));
});

因為懶的再開新專案，今天範例就與昨天的放一起囉～
實作如下：
https://stackblitz.com/edit/angular-routing-breadcrumb?file=src%2Fapp%2Fuser%2Fuser.component.ts