在Angular Routing那篇文章有描述如何定義路由。此外，路由路徑也很常見傳入參數，例如.../product/edit?id=5#loading，這種情況要如何用Angular來達成呢？

路由參數設定

在html如何達成.../product/edit?id=5#loading：

1
2
3
4
5
6
<a
    [routerLink]="['/product', 'edit']"
    [queryParams"{id: '5'}
    fragment="loading">
    Product
</a>

取得路由參數

設定

使用activatedRoute來取得，須先注入：

1
constructor(private route: ActivatedRoute) {}

1. 快照snapshot

1
2
console.log(this.route.snapshot.queryParams);
console.log(this.route.snapshot.fragment);

2. 訂閱subscribe

1
2
this.route.queryParams.subscribe();
this.route.fragment.subscribe();