Angularでクエリパラメータを使用する方法

はじめに

Angular でクエリパラメータを使用すると、アプリケーション内の任意のルートにオプションのパラメータを渡すことができます。クエリパラメータは通常のルートパラメータとは異なり、1つのルートでのみ使用でき、オプションではありません（例: /product/:id）。

この記事では、製品のリストを表示するアプリケーションの例を参照します。受信コンポーネントが読み取り、処理できるオプションのorderおよびprice-rangeの値を提供します。提供された値は、製品リストの順序付けとフィルタリングに影響します。

Router.navigate でクエリパラメータを使用する

Router.navigateを使用してルートに移動する必要がある場合は、queryParams でクエリパラメータを渡します。

この例では、人気順にリストされた製品に訪問者を割り当てる場合、次のようになります。

goProducts() {
  this.router.navigate(['/products'], { queryParams: { order: 'popular' } });
}

これにより、URLは以下のようになります。

http://localhost:4200/products?order=popular

複数のクエリパラメータを指定することもできます。この例では、人気順にリストされた製品に訪問者を割当し、高価な価格帯でフィルタリングする場合は、次のようになります。

goProducts() {
  this.router.navigate(['/products'], { queryParams: { order: 'popular', 'price-range': 'not-cheap' } });
}

これにより、URLは以下のようになります。

http://localhost:4200/products?order=popular&price-range=not-cheap

これで、queryParams を使用してクエリパラメータを設定する方法を理解することができました。

queryParamsHandling を使用したクエリパラメータの保持またはマージ

デフォルトでは、クエリパラメータは後続のナビゲーション操作で失われます。これを防ぐために、queryParamsHandlingを'preserve'または'merge'のいずれかに設定します。

この例では、クエリパラメータを保持したまま、クエリパラメータ { order: 'popular' }を含むページから/users ページに訪問者を割り当てる場合は、'preserve'を使用します。

goUsers() {
  this.router.navigate(['/users'], { queryParamsHandling: 'preserve' });
}

これにより、URLは以下のようになります。

http://localhost:4200/users?order=popular

この例では、クエリパラメータ { order: 'popular' }を含むページから、/users ページに訪問者を割り当て、クエリパラメータ { filter: 'new' } を渡す場合は、'merge'を使用します。

goUsers() {
  this.router.navigate(['/users'], { queryParams: { filter: 'new' }, queryParamsHandling: 'merge' });
}

これにより、URLは以下のようになります。

http://localhost:4200/users?order=popular&filter=new

これで、queryParamsHandling を使用してクエリパラメータを保持およびマージする方法を理解することができました。

RouterLink でクエリパラメータを使用する

この例では、代わりにRouterLink ディレクティブを使用してルートに移動する場合は、次のようにqueryParamsを使用します。

<a [routerLink]="['/products']" [queryParams]="{ order: 'popular'}">
  Products
</a>

この例では、後続のナビゲーションでクエリパラメータを 'preserve' または 'merge'する場合、次のように queryParamsHandling を使用します。

<a [routerLink]="['/users']"
   [queryParams]="{ filter: 'new' }"
   queryParamsHandling="merge">
  Users
</a>

これで、RouterLink で queryParams および queryParamsHandling の使用方法を理解することができました。

クエリパラメータ値へのアクセス

オプションのクエリパラメータをルートに渡す方法を学習したので、作成されたルートでこれらの値にアクセスする方法を見てみましょう。ActivatedRoute クラスには、queryParams プロパティがあり、現在の URL で使用可能なクエリパラメータのオブザーバブルな値を返します。

次のルートURL を指定します。

http://localhost:4200/products?order=popular

以下のように、order クエリパラメータにアクセスできます。

// ...
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/filter';

@Component({ ... })
export class ProductComponent implements OnInit {
  order: string;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams
      .filter(params => params.order)
      .subscribe(params => {
        console.log(params); // { order: "popular" }

        this.order = params.order;
        console.log(this.order); // popular
      }
    );
  }
}

コンソールログでは、次のように params オブジェクトが表示されます。

Output
{ order: "popular" }

params.order の値は次のとおりです。

Output
popular

また、queryParamMap もあり、これは paramMap オブジェクトを使用してオブザーバブルな値を返します。

次のルートURL を指定します。

http://localhost:4200/products?order=popular&filter=new

次のように、クエリパラメータにアクセスできます。

this.route.queryParamMap
  .subscribe((params) => {
    this.orderObj = { ...params.keys, ...params };
  }
);

ここではオブジェクトスプレッド演算子を使用して、これはorderObj のデータの結果の状態を示します。

{
  "0": "order",
  "1": "filter",
  "params": {
    "order": "popular",
    "filter": "new"
  }
}

これで、queryParams および queryParamMap を使用して作成されたルートの値にアクセスする方法を理解することができました。

まとめ

この記事では、さまざまな例を使用して、Angular でクエリパラメータを設定および取得しました。Router.navigate と RouterLink を使用して、queryParams と queryParamsHandling を紹介しました。ActivatedRoute を使用した queryParams と queryParamMapについても説明しました。

Angular の詳細については、Angular トピックページで演習とプログラミングプロジェクトをご覧ください。