Angular で画面を Reload せずにクエリパラメータを変える

http://localhost:4200/#/list?q=あいう という URL であるとき、検索ワードを「かきく」に変えたら URL も http://localhost:4200/#/list?q=かきく に変わって欲しい、を実現するやつ。

// private router: Router
// private route: ActivatedRoute

this.router.navigate([], {
  relativeTo: this.route,
  queryParams: { q: 'かきく' },
  queryParamsHandling: 'merge',
  replaceUrl: true
});

これで OK.

History.replaceState() でも実現できるけど、replaceState() は Angular の外の世界を変える手法であり、それは Angular の中にも副作用があるかも。

実際、Angular の scrollPositionRestoration の挙動確認と、最適なヘッダー／フッターレイアウトの模索 | Experiments Never Fail で試した「ブラウザの戻る(history.back()) 時に、以前のY座標(top)を復元しようとする」は、History.replaceState() で URL を変えた後で Back したら効かなかった。

ので、Angular が提供する機能で行えるならできるだけそうしましょう。