提取 URL 動態路徑參數

在 Angular 中，從 URL 提取動態路徑參數有幾種主要方法。

方法一：使用元件輸入綁定 (Component Input Binding)

Angular 提供了一種直接將路由參數綁定到元件輸入的方式，這是在 Angular 14+ 中引入的功能。

設定方式

1. 在元件中定義與路由參數同名的輸入屬性：

// 使用 signals (Angular 16+)
userId = input.required<string>();

// 或使用傳統裝飾器方式，在這邊也可以搭配 set 方法
@Input({required: true}) userId!: string;

1. 在應用配置中啟用元件輸入綁定：

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes, withComponentInputBinding())],
};

1. 使用這個參數：

// 搭配 computed 使用
userName = computed(() => {
  return this.usersService.users.find((user) => user.id === this.userId())?.name;
});

優點

• 簡潔直觀，減少了模板代碼

• 配合 Angular signals 使用效果更佳

• 不需要手動管理訂閱

注意事項

• 參數值始終是字串類型，因為 URL 是字串

• 參數名稱必須與路由配置中定義的參數名稱匹配

方法二：使用 ActivatedRoute 服務

這是傳統且靈活的方式，可以訪問更多路由相關訊息。

注入服務

private activatedRoute = inject(ActivatedRoute);

方式 A：使用 Observable (推薦)

paramMap 是一個 Observable，它會在路由參數變動時發出通知。當訂閱這個 Observable 時，在 next 回調中接收到的是一個 ParamMap 物件。

這個 ParamMap 物件內部儲存著路由參數的鍵值對，其中鍵是你在路由定義中指定的參數名（例如 :userId），值則是 URL 中對應的實際值。

ParamMap 物件提供了 get() 方法來取得特定參數的值。例如 paramMap.get('userId') 會返回 URL 中 :userId 參數的實際值。

通過 paramMap Observable 訂閱參數變化：

ngOnInit(): void {
  const getUserNameSubscription = this.activatedRoute.paramMap.subscribe({
    next: (paramMap) => {
      this.userName = this.usersService.users.find(
        (user) => user.id === paramMap.get('userId')
      )?.name || '';
    },
  });
  
  // 重要：在元件銷毀時取消訂閱
  this.destroyRef.onDestroy(() => {
    getUserNameSubscription.unsubscribe();
  });
}

方式 B：使用 snapshot

如果你確定參數不會在元件生命週期內變化，可以使用快照：

ngOnInit(): void {
  const userId = this.activatedRoute.snapshot.paramMap.get('userId');
  this.userName = this.usersService.users.find(
    (user) => user.id === userId
  )?.name || '';
}

關於元件重用的重要說明

在 Angular 中，當在同一個路由模式內切換不同參數時（例如從 /users/1 到 /users/2），Angular 預設會重用元件而不是銷毀並重新創建它。

這意味著：

• ngOnInit() 不會在參數改變時重新運行

• 只有在首次載入元件時才會執行元件初始化程式碼

• 使用 snapshot 方式獲取參數時，參數值不會自動更新

因此，當處理可能參數變化的場景時：

• 推薦使用 Observable 方式獲取參數

• 或者使用元件輸入綁定（方法一）

如果你需要強制元件在參數變化時重新初始化，可以自定義路由重用策略。

各方法比較

方法	優點	缺點	適用場景
元件輸入綁定	簡潔、自動更新、無需訂閱管理	需要額外配置	現代 Angular 專案
ActivatedRoute Observable	靈活、可獲取更多資訊	需要手動管理訂閱	複雜路由場景
ActivatedRoute Snapshot	簡單、無需訂閱	參數變化時不更新	參數不會變化的場景