應用情境

  • 多個商品頁面：product/1，product/2…
  • 多個使用者：user/1，user/2…

概念

ActivatedRoute會針對當前被激發的(activated)路由(route)，去取得該路由傳遞的參數(params)。

使用

在Angular Routing那篇文章有描述如何定義路由。

1. 在app.module.ts定義路徑

1
2
3
4
const appRoutes: Routes = [
    ...,
    {path: 'users/:id/:name, component: UserComponent}
]

2. 在user.component.ts使用

- 快照(snapshot)

現在當我去url: …/user/1/John，就會出現相應的內容(需撰寫user.component.html)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  user: {id: number, name: string};

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.user = {
      id: this.route.snapshot.params['id'],
      name: this.route.snapshot.params['name']
    };
  }
}

- 訂閱(subscribe)

如果我在html加上<a [routerLink]="['/users', 5, 'Ann']">Load #5 Ann</a>，頁面不會顯示新的參數，而是維持在原有的畫面，但是url換成了…/5/Ann。
如果要即時獲得新參數，使用訂閱(subscribe)：

1
2
3
4
5
6
7
8
9
10
11
<!-- 與上方code相同，再加上... -->
ngOnInit() {
    ...
    this.route.params
      .subscribe(
        (params: Params) => {
          this.user.id = params['id'];
          this.user.name = params['name'];
        }
      );
}