Angular Academy · 课时

路由参数与查询参数

Q: 「路由参数与查询参数」这节课中我会学到什么？

读取并响应路由参数 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

读取并响应路由参数

路由参数与查询参数 是 CoddyKit 上的免费 Angular Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

路由参数与查询参数

路由参数是路径的一部分（/user/42）。查询参数附加在 ? 后面（/search?q=ng&page=2）。路由器为这两者提供响应式访问方式。

定义路由参数

在路径中使用冒号声明参数。

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

使用 paramMap 读取参数

ActivatedRoute.paramMap 是一个可观察对象，每当路由参数发生变化时就会发出值。请使用 .get() 读取值。

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

为何要观察参数

从 /user/1 导航到 /user/2 时，组件可能会被复用。构造函数只运行一次，但 paramMap 会再次发出值——因此请订阅它来响应变化。

用于一次性读取的快照

如果组件不会因不同参数而被复用，您可以同步读取快照。

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

使用 queryParamMap 获取查询参数

queryParamMap 会公开查询字符串中的值，同样以可观察对象的形式提供。

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

使用查询参数进行导航

请在 router.navigate 的 queryParams 选项中使用查询参数，或者使用 routerLink 指令。

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

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

保留查询参数

queryParamsHandling: 'merge' 会在更新部分参数时保留现有参数；'preserve' 会在导航过程中携带这些参数。

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

组件输入绑定（现代方式）

使用 withComponentInputBinding() 后，路由参数和查询参数可以直接绑定到组件的 @Input()（或输入信号），从而无需使用 ActivatedRoute。

// in provideRouter(routes, withComponentInputBinding())

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

使用 getAll 处理重复参数

当查询键可能出现多次时，请使用 getAll()，例如 ?tag=a&tag=b。

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

组合参数与数据加载

一种常见模式是：使用 switchMap 将参数映射为 HTTP 调用，这样 id 发生变化时就会重新获取数据。

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

快速检查

测试您对路由参数的理解。

回顾：路由参数与查询参数

路由器以响应式方式公开参数。

paramMap：路径参数，在组件复用时进行观察。
queryParamMap：查询字符串，使用 getAll 处理重复参数。
snapshot：用于一次性读取。
withComponentInputBinding()：将参数绑定到输入。

下一节：解析器和路由数据。

常见问题解答

「路由参数与查询参数」课时是免费的吗？

是的 — 「路由参数与查询参数」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「路由参数与查询参数」这节课中我会学到什么？

读取并响应路由参数你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「路由参数与查询参数」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy