52. クエリパラメータ — 検索条件をURLに載せる

URLの ? 以降に付く ?page=2&sort=price のような部分をクエリパラメータと呼びます。ルートパラメータ(:id)が「どのページか」を決めるのに対し、クエリは「そのページの表示条件」を運びます。読み取りは inject(ActivatedRoute) の queryParamMap から、リンク側は routerLink の [queryParams] で付与します。

実務での使いどころは検索・絞り込み・ページ番号です。検索条件をコンポーネントの変数だけに持つとリロードで消えますが、URLに載せておけばリロードしても同じ結果が再現され、そのURLを共有すれば相手にも同じ画面が開きます。「画面の状態はできるだけURLに置く」は一覧ページ設計の定石です。

つまずきやすいのは、ルートパラメータと同じく値が常に文字列であることと、パラメータが無いときに null が返ることです。page として使うなら Number(map.get('page') ?? '1') のように、変換と初期値の両方を用意しておくと安全です。

サンプルコード(フレームワーク環境が必要なため表示のみ)

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

@Component({
  selector: 'app-product-list',
  template: '<p>{{ page }}ページ目を {{ sort }} 順で表示</p>',
})
export class ProductList {
  private route = inject(ActivatedRoute);

  // /products?page=2&sort=price から読み取る
  // 値は文字列、無ければ null なので初期値を用意する
  page = Number(this.route.snapshot.queryParamMap.get('page') ?? '1');
  sort = this.route.snapshot.queryParamMap.get('sort') ?? 'new';
}

// リンク側はこう書く:
// <a [routerLink]="['/products']" [queryParams]="{ page: 2, sort: 'price' }">

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗