引言
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 纠缠不清了。
