AngularでURLにクエリパラメータを追加する方法

ActivatedRouteを使用する方法:

AngularのRouterモジュールには、現在のルートに関する情報を提供するActivatedRouteクラスがあります。これを使用して、現在のURLのクエリパラメータを取得し、変更することができます。

import { ActivatedRoute, Router } from '@angular/router';
constructor(private route: ActivatedRoute, private router: Router) {}
// クエリパラメータを追加する例
addQueryParam() {
  this.route.queryParams.subscribe(params => {
    const newParams = { ...params, key: 'value' };
    this.router.navigate([], { queryParams: newParams });
  });
}

Routerを使用する方法:

Routerモジュールのnavigateメソッドを使用することもできます。このメソッドを使用すると、新しいURLに移動しながらクエリパラメータを追加することができます。

import { Router } from '@angular/router';
constructor(private router: Router) {}
// クエリパラメータを追加する例
addQueryParam() {
  const queryParams = { key: 'value' };
  this.router.navigate([], { queryParams: queryParams });
}

Locationを使用する方法:

AngularのLocationクラスを使用して、現在のURLを取得し、それにクエリパラメータを追加することもできます。

import { Location } from '@angular/common';
constructor(private location: Location) {}
// クエリパラメータを追加する例
addQueryParam() {
  const currentUrl = this.location.path();
  const newUrl = `${currentUrl}?key=value`;
  this.location.go(newUrl);
}

これらは、AngularでURLにクエリパラメータを追加するためのいくつかの一般的な方法です。どの方法を選ぶかは、アプリケーションの具体的な要件によって異なります。