详解Angular16如何获取路由参数
更新时间：2023年07月27日 08:48:37 作者：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获取路由参数的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了AngularJS实现单一页面内设置跳转路由的方法,结合实例形式分析了AngularJS路由操作相关设置与使用技巧,需要的朋友可以参考下2017-06-06
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
这篇文章主要介绍了Angularjs在初始化未完毕时出现闪烁问题的解决方法,结合实例形式分析了3种常用的闪烁问题解决方法,需要的朋友可以参考下2016-08-08
下面小编就为大家带来一篇使用yeoman构建angular应用的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
下面小编就为大家带来一篇详谈angularjs中路由页面强制更新的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
本文通过实例代码给大家介绍了AngularJS日程表案例详解，通过简单代码实现了添加事件/完成事件/删除事件功能，具体代码大家参考下本文2017-08-08
本篇文章主要介绍了angular使用bootstrap方法手动启动的实例代码，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
这篇文章主要介绍了AngularJS 单元测试（一）详解的相关资料,需要的朋友可以参考下2016-09-09
简介可以自动完成UI的AngularJS工具angular-smarty
这篇文章主要介绍了简介可以自动完成UI的AngularJS工具angular-smarty,包括其中隔离作用域绑定指令符和promise的使用,需要的朋友可以参考下2015-06-06
这篇文章主要给大家分享了关于Angular.Js之Scope作用域的学习教程 ,文中通过多个示例代码介绍的非常详细，相信对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-04-04
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
这篇文章主要介绍了AngularJS实现的省市二级联动功能,涉及事件监听、响应及页面元素动态操作相关技巧,此外还具备对选项进行增删的功能,需要的朋友可以参考下2017-10-10
最新评论