隨記

Week 04 · Day 05 — 帶參數的路由

學習目標

  • 定義帶動態參數的路由 user/:id
  • 用 ActivatedRoute 讀取 URL 參數
  • 用 Router 程式化導覽

重點

定義帶參數路由 

const routes: Routes = [
  { path: 'user/:id', component: UserComponent },
  { path: 'product/:id', component: ProductComponent }
];
- :id 是動態片段，/user/123 的 id 就是 123

在元件讀取參數 

import { ActivatedRoute } from '@angular/router';

@Component({ ... })
export class UserComponent {
  userId: string = "";

  constructor(private route: ActivatedRoute) {
    this.route.params.subscribe(params => {
      this.userId = params['id'];
    });
  }
}
- ActivatedRoute 提供目前路由資訊 - params.subscribe(...) 訂閱參數變化（跳轉到別的使用者也會更新）

運用參數導覽 

<a [routerLink]="['/user', user.id]">{{ user.name }}</a>

程式化導覽 

constructor(private router: Router) {}

goToUser(id: string): void {
  this.router.navigate(['/user', id]);
}

實作

  1. 定義 user/:id 路由並建立 UserComponent
  2. 用 ActivatedRoute.params 顯示 id
  3. 用 [routerLink] 或 router.navigate() 跳轉

作業

  • 建立一個 user/:id 帶參數路由
  • 用 ActivatedRoute 讀取並顯示 id
  • 用 router.navigate() 做一次程式化跳轉