iT邦幫忙

2021 iThome 鐵人賽

DAY 28
1
Modern Web

Angular 常見問題大小事系列 第 28

如何在 Angular 獲取 URL 資訊

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


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 裡執行
取得 userIdironmanId

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


上一篇
如何在 Angular 建立 Breadcrumb (麵包屑)
下一篇
Angular Providers
系列文
Angular 常見問題大小事31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Tim Hsu
iT邦新手 1 級 ‧ 2021-10-09 22:41:44

這招厲害!

Mandy iT邦新手 3 級 ‧ 2021-10-09 23:07:14 檢舉

讚啦

我要留言

立即登入留言