경로 매개 변수와 쿼리 매개 변수

경로 매개변수와 쿼리 매개변수

경로 매개변수 정의

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);
});

매개변수를 관찰하는 이유

한 번만 읽을 때 사용하는 스냅샷

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));

빠른 확인

복습: 경로 및 쿼리 매개변수