angular parameter

Angularでクエリパラメータを使いこなす

クエリパラメータは、URLに情報を付加してページ遷移を行う際に便利な仕組みです。Angularでは、Router.navigate や RouterLink を使用してクエリパラメータを簡単に扱えます。この記事では、それぞれの方法とクエリパラメータの保持・マージ、そしてコンポーネントでの値の取得方法まで解説します。

1. Router.navigate でクエリパラメータを渡す

Router.navigate を使用してページ遷移する際に、queryParams プロパティにオブジェクトを渡すことで、クエリパラメータを付加できます。

例えば、「人気順」にソートされた商品一覧ページに遷移する場合を考えてみましょう。

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

上記コードを実行すると、http://localhost:4200/products?order=popular のように、URLに order=popular というクエリパラメータが付加されます。

複数のクエリパラメータを渡したい場合は、queryParams オブジェクトに複数のキーと値を追加します。

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

この場合、URLは http://localhost:4200/products?order=popular&price-range=high となります。

2. queryParamsHandling でクエリパラメータを保持またはマージ

デフォルトでは、ページ遷移を行うとクエリパラメータは破棄されます。しかし、queryParamsHandling プロパティを使用することで、クエリパラメータを保持またはマージできます。

2.1. 'preserve' オプション

queryParamsHandling: 'preserve' を指定すると、後続のナビゲーションでクエリパラメータがそのまま保持されます。

例えば、先ほどの「人気順の商品一覧」ページ (/products?order=popular) からユーザー一覧ページ (/users) に遷移する場合、以下のコードではクエリパラメータが保持されます。

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

遷移後のURLは http://localhost:4200/users?order=popular となり、商品一覧ページのクエリパラメータが引き継がれます。

2.2. 'merge' オプション

queryParamsHandling: 'merge' は、既存のクエリパラメータに新しいクエリパラメータを追加します。

先ほどと同じく、「人気順の商品一覧」ページ (/products?order=popular) からユーザー一覧ページ (/users) に遷移する際に、filter=new というクエリパラメータを追加したい場合、以下のコードを使用します。

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

この場合、遷移後のURLは http://localhost:4200/users?order=popular&filter=new となり、既存の order=popular に加えて filter=new が追加されます。

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

RouterLink ディレクティブを使用する場合も、クエリパラメータを簡単に設定できます。 [queryParams] 属性にオブジェクトを渡すことで、クエリパラメータを付加できます。

<a [routerLink]="['/products']" [queryParams]="{ order: 'popular' }">人気商品</a>

queryParamsHandling も同様に、 [queryParamsHandling] 属性で使用できます。

<a [routerLink]="['/users']" 
   [queryParams]="{ filter: 'new' }" 
   [queryParamsHandling]="'merge'">新規ユーザー</a>

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

コンポーネント内でクエリパラメータの値を取得するには、 ActivatedRoute を使用します。 ActivatedRoute の queryParams プロパティは、現在のURLで使用可能なクエリパラメータのオブザーバブルな値を返します。

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  // ...
})
export class ProductListComponent {
  constructor(private route: ActivatedRoute) {
    this.route.queryParams.subscribe(params => {
      console.log(params); // { order: 'popular', 'price-range': 'high' } など
      const order = params['order'];
      const priceRange = params['price-range'];
      // 取得したクエリパラメータを使って処理を行う
    });
  }
}

queryParams は Observable なので、 subscribe() メソッドを使って値を取得します。

4.1 queryParams と queryParamMap の違い

queryParams は、クエリパラメータをキーと値のペアを持つオブジェクトとして返します。一方、 queryParamMap は ParamMap オブジェクトを返します。 ParamMap は、キーの取得や値の取得、キーの存在確認などをより安全に行うためのメソッドを提供しています。どちらを使用するかは状況によりますが、単純な値の取得であれば queryParams で十分です。より複雑な処理を行う場合は queryParamMap を検討しましょう。

5. まとめ

この記事では、Angularでクエリパラメータを扱う方法について解説しました。 Router.navigate や RouterLink でクエリパラメータを付加する方法、 queryParamsHandling を使ってクエリパラメータを保持またはマージする方法、 ActivatedRoute を使ってコンポーネント内でクエリパラメータを取得する方法を学びました。クエリパラメータを適切に使用することで、より柔軟でユーザーフレンドリーなWebアプリケーションを構築できます。