详解Angular16如何获取路由参数

2023-07-27 08:37:17 作者：cipchk

这篇文章主要为大家介绍了Angular16如何获得路由参数的实现方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

引言

Anguar 16 引入一个有趣的功能，可以将路由器数据直接通过 @Input 来绑定，例如：QueryString，路由参数，data 静态数据。

在 Angular 16 之前，需要通过 ActivatedRoute 来获取这些数据。假设有这么一个路由配置：

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

并通过以下访问路由时：

/weixin?uid=1&allow=false

我们可以透过注入 ActivatedRoute 并分别从 data、params、queryParams 获取到所需要的数据。

倘若，你想监听 params 数据的变化，还需要单独为订阅处理；

除此之外，除 data 以外，其他数据类型都是自动转成 string，反正到这里我已经很烦人了。

从 Angular 16 开始这些参数都可以自动绑定到 @Input 输入参数当中。可以通过 bindToComponentInputs 激活这个有趣的新功能，就像这样：

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

# Sandalone 版本
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 写法。

以上就是详解Angular16如何获取路由参数的详细内容，更多关于Angular16获取路由参数的资料请关注脚本之家其它相关文章！