Angular16获取路由参数方法详解

引言

Angular 16 引入了一项备受期待的功能——路由器数据可以直接通过 @Input 装饰器绑定到组件上。这意味着查询字符串、路径参数以及路由配置中定义的 data 静态信息，都能自动注入到组件的输入属性中。这一改进让开发者们纷纷感叹“终于来了”。

旧写法

在 Angular 16 之前，获取这些数据必须依赖 ActivatedRoute 服务。假设我们配置了如下路由：

{ 
  path: ':type', 
  component: TestComponent,
  data: { role: 'admin' }
}

并通过以下 URL 访问：

/weixin?uid=1&allow=false

那么组件内部就需要注入 ActivatedRoute，然后分别从 data、params、queryParams 中手动提取数据。更麻烦的是，若想监听 params 的动态变化，还得额外编写订阅逻辑。此外，除了 data 之外，其他参数默认都是字符串类型——没错，连数字 1 传过来也会被当作字符串。这种繁琐的操作确实令人头疼。

新方式

从 Angular 16 开始，这些参数可以直接绑定到组件的 @Input 属性上。只需开启一个开关：

RouterModule.forRoot(routes, {
  bindToComponentInputs: true
});

// 如果是 standalone 模式：
provideRouter([], withComponentInputBinding())

然后在组件中直接声明输入属性即可：

@Input() type = '';
@Input() role = '';
@Input({ transform: numberAttribute }) uid = 0;
@Input({ transform: booleanAttribute }) allow = false;

值得留意的是，transform 参数是 Angular 16.1 以上版本新增的改进，它能自动将字符串转换为数字或布尔值，省去了手动编写 get/set 转换逻辑的麻烦——代码更简洁，使用更舒心。

此外，当路由参数发生变化时，@Input 会自动更新。你可以通过 ngOnChanges 生命周期钩子来捕捉变化，也可以利用 get/set 自行处理。总之，这一特性让路由数据的获取变得直观而高效，再也不用和 ActivatedRoute 纠缠不清了。