Đọc route params và query params trong Angular như thế nào?

Cách hiện đại nên ưu tiên withComponentInputBinding() nếu param map trực tiếp vào input. Khi cần đọc router state phức tạp, dùng ActivatedRoute và paramMap/queryParamMap.

Ví dụ bridge route param sang signal:

@Component({ template: "User {{ id() }}" })
export class UserPage {
  private route = inject(ActivatedRoute)
  id = toSignal(this.route.paramMap.pipe(map(params => params.get("id"))), {
    initialValue: null,
  })
}

Snapshot chỉ phù hợp khi param không đổi trong lifetime component.

Nếu route reuse và param có thể đổi, dùng stream hoặc component input binding.

Prefer withComponentInputBinding() when route params map directly to component inputs. When you need more complex router state, use ActivatedRoute and paramMap/queryParamMap.

Bridge route params to a signal:

@Component({ template: "User {{ id() }}" })
export class UserPage {
  private route = inject(ActivatedRoute)
  id = toSignal(this.route.paramMap.pipe(map(params => params.get("id"))), {
    initialValue: null,
  })
}

A snapshot is fine only when params do not change during the component lifetime.

If the route is reused and params can change, use streams or component input binding.