我要评论引言
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获取路由参数的资料请关注代码网其它相关文章！
发表评论