Angular の routerLink でクエリパラメータを指定する
Angular 4.2.2 の話です。
<a routerLink="/foo?bar=10">link</a>
のように routerLink
にクエリパラメータを直接指定すると Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'foo%3Fbar%3D10'
といったエラーが出ます。
RouterLink のリファレンスにあるように [queryParams]
にオブジェクトを指定すれば動作するようになります。
<a routerLink="/foo" [queryParams]='{ bar: 10 }'>link</a>
routerLink
がダメなら href
で……というのも試してみたのですが、これだと遷移するにはするのですが、ページ全体の再読込がかかってしまいました。
<a href="/foo?bar=10">link</a>
基本的にはちゃんと動く書き方をすればいいのですが、ウェブ API から受け取ったリンク先に遷移させたい場合は、API から受け取った文字列をパースして routerLink
と queryParams
に設定するといった実装が必要になってきます。これは手間です。このあたりを賢くやってくれる方法があればいいのですが。