พารามิเตอร์เส้นทางและพารามิเตอร์คำค้น

พารามิเตอร์เส้นทางกับพารามิเตอร์คำค้นหา

การกำหนดพารามิเตอร์เส้นทาง

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

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทบทวน: พารามิเตอร์เส้นทางและคำค้นหา