Angular 16 如何获取路由参数

引言

Angular 16 引入了一项值得关注的改进——路由器数据可以直接通过 @Input 绑定到组件上。具体来说，QueryString、路由参数以及路由配置中的 data 静态数据，均能自动注入到组件的输入属性中。这一特性受到广泛欢迎，许多开发者认为它极大地简化了开发流程。

旧写法

在 Angular 16 之前，获取这些数据需要使用 ActivatedRoute。假设有以下路由配置：

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

通过以下地址访问：

/weixinuid=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 进行繁琐的交互。