ナチュラル @rch850

ナチュラル丼発祥の地、福井からお届けします。技術的な話題とか、雑談とか。

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 から受け取った文字列をパースして routerLinkqueryParams に設定するといった実装が必要になってきます。これは手間です。このあたりを賢くやってくれる方法があればいいのですが。