Angular 路由参数详解 🌐

在 Angular 应用中，路由参数是传递动态数据的重要方式，常用于根据 URL 片段展示不同内容。以下是关键知识点：

一、路由参数类型

必填参数：使用冒号 : 声明，如 /user/:id
可选参数：使用问号 ? 声明，如 /user/:id?
矩阵参数：使用方括号 [] 声明，如 /user/123[?sort]

二、获取参数方法

// 在组件中通过 ActivatedRoute 获取
constructor(private route: ActivatedRoute) {}

ngOnInit() {
  const id = this.route.snapshot.paramMap.get('id'); // 静态获取
  this.route.paramMap.subscribe(params => {
    console.log(params.get('name')); // 动态订阅
  });
}

三、示例场景

例如在博客系统中：

/posts/123 显示文章 ID 为 123 的内容
/user/456/profile 展示用户 456 的个人资料

Angular Routing Params

Route Parameters Example

四、扩展学习

Angular 路由指南：深入理解路由配置
路由守卫实践：控制参数访问权限

📌 提示：参数编码建议使用 URL 编码规范，避免特殊字符干扰路由解析。