脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → Angular16获取路由参数

详解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中$sce与$sceDelegate上下文转义服务

    详解AngularJs中$sce与$sceDelegate上下文转义服务

    这篇文章给大家详细介绍了AngularJs提供的严格上下文转义服务$sce与$sceDelegate，文中介绍的很详细，有需要的朋友们可以参考借鉴。
    2016-09-09
  • 在Angular使用ng-container元素的操作详解

    在Angular使用ng-container元素的操作详解

    ng-container 是 Angular 2+ 中可用的一个元素,可以作为结构指令的宿主,在本文中,您将探讨可以使用 ng-container 解决的场景,文中有相关的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下
    2024-02-02
  • AngularJS入门教程之双向绑定详解

    AngularJS入门教程之双向绑定详解

    本文主要介绍AngularJS 双向绑定，这里整理了详细的知识资料并讲解，而且附有代码示例，有兴趣的小伙伴可以参考下
    2016-08-08
  • Ubuntu系统下Angularjs开发环境安装

    Ubuntu系统下Angularjs开发环境安装

    本文主要介绍 Ubuntu系统下Angularjs开发环境安装，这里详细介绍了安装步骤和注意事项，有在Ubuntu 环境下开发的朋友可以参考下
    2016-09-09
  • Angular和百度地图的结合实例代码

    Angular和百度地图的结合实例代码

    最近在angular的项目，但是我用直接引用百度地图的方法引进js,写html,js代码，发现报错，接下来通过本文给大家介绍angular和百度地图的结合,需要的朋友可以参考下
    2016-10-10
  • Angular项目如何升级至Angular6步骤全纪录

    Angular项目如何升级至Angular6步骤全纪录

    这篇文章主要给大家介绍了关于Angular项目如何升级至Angular6的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-09-09
  • angular中使用路由和$location切换视图

    angular中使用路由和$location切换视图

    这篇文章主要介绍了angular中使用路由和$location切换视图,需要的朋友可以参考下
    2015-01-01
  • angularjs指令中的compile与link函数详解

    angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下
    2014-12-12
  • Angular2自定义分页组件

    Angular2自定义分页组件

    本篇文章主要介绍了Angular2自定义分页组件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • angular.element方法汇总

    angular.element方法汇总

    本文主要给大家汇总了一下angular.element的方法，十分的详细，这里推荐给大家 参考下。
    2015-01-01

最新评论