ルートパラメーターとクエリパラメーター

ルートパラメーターとクエリパラメーターの違い

ルートパラメーターの定義

export const routes = [
  { path: 'user/:id', component: UserComponent }
];

paramMapでパラメーターを読み取る

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

const route = inject(ActivatedRoute);
route.paramMap.subscribe(params => {
  const id = params.get('id');
  console.log('user id', id);
});

パラメーターを監視する理由

一度だけ読み取るためのSnapshot

const id = route.snapshot.paramMap.get('id');
// only valid if the route param will not change
// while this component instance is alive

queryParamMapでクエリパラメーターを扱う

route.queryParamMap.subscribe(qp => {
  const page = Number(qp.get('page') ?? '1');
  const q = qp.get('q') ?? '';
  console.log(q, page);
});

クエリパラメーターを指定して移動する

import { Router } from '@angular/router';
const router = inject(Router);

router.navigate(['/search'], {
  queryParams: { q: 'angular', page: 2 }
});

クエリパラメーターを保持する

router.navigate(['/search'], {
  queryParams: { page: 3 },
  queryParamsHandling: 'merge'
});

コンポーネント入力バインディング（モダンな方法）

// in provideRouter(routes, withComponentInputBinding())

export class UserComponent {
  @Input() id!: string; // bound from /user/:id
}

繰り返し出現するパラメーターのためのgetAll

route.queryParamMap.subscribe(qp => {
  const tags = qp.getAll('tag'); // ['a', 'b']
  console.log(tags);
});

パラメーターとデータ読み込みの組み合わせ

route.paramMap.pipe(
  switchMap(p => this.http.get('/api/user/' + p.get('id')))
).subscribe(user => console.log(user));

クイックチェック

振り返り：ルートパラメーターとクエリパラメーター