Angular+Ionic使用queryParams实现跳转页传值的方法

 更新时间:2020年09月05日 10:45:58   作者:会做梦的辣条鱼  
这篇文章主要介绍了Angular+Ionic使用queryParams实现跳转页传值的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

最近,在做电商项目,项目中需要实现:点击编辑按钮,跳转页面完成添加地址,修改地址功能。
使用到angular传参,简单做一总结:

1,发送界面ts

1
2
3
4
5
6
//编辑地址
 EditorAddress(item) {
 console.log("选中的地址");
 console.log(item);
 this.router.navigate(['/editor-address'], { queryParams: item })
 }

2,接收界面ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public personName:string=""
 public phone:string=""
 public areaInfo:string=""
 public detailedAddress:string=""
 public isDefault:number
  
ngOnInit() {
 //编辑地址
 this.activatedRoute.queryParams.subscribe((res) => {
 this.personName =res.personName,
 this.phone=res.phone,
 this.areaInfo=res.areaInfo,
 this.detailedAddress=res.detailedAddress,
 this.isDefault=res.isDefault//1
 //
 })
 }

3,效果

在这里插入图片描述

到此这篇关于Angular+Ionic使用queryParams实现跳转页传值的文章就介绍到这了,更多相关Angular跳转页传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/weixin_44794123/article/details/108400787

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • AngularJS 应用身份认证的技巧总结

    AngularJS 应用身份认证的技巧总结

    这篇文章主要介绍了AngularJS 应用身份认证的技巧总结,具有一定的参考价值,有需要的可以了解一下。
    2016-11-11
  • AngularJS实践之使用ng-repeat中$index的注意点

    AngularJS实践之使用ng-repeat中$index的注意点

    最近通过客户的投诉主要到在ng-repeat中使用了$index引发的一个bug,下面一起来看看这个错误是如何引发的, 以及如何避免这种bug产生,然后说说我们从中得到的经验和教训。有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-12-12
  • 详解Monaco Editor中的Keybinding机制

    详解Monaco Editor中的Keybinding机制

    这篇文章主要为大家介绍了详解Monaco Editor中的Keybinding机制详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 详解AngularJs中$resource和restfu服务端数据交互

    详解AngularJs中$resource和restfu服务端数据交互

    之前小编和大家分享过使用$http同服务器进行通信,但是功能上比较简单,angularjs还提供了另外一个可选的服务$resource,使用它可以非常方便的同支持restful的服务单进行数据交互。下面来一起看看吧。
    2016-09-09
  • AngularJS基础 ng-keypress 指令简单示例

    AngularJS基础 ng-keypress 指令简单示例

    本文主要介绍AngularJS ng-keypress 指令,这里帮大家整理了基础资料,并附是示例代码,有需要的小伙伴可以参考下
    2016-08-08
  • 基于datepicker定义自己的angular时间组件的示例

    基于datepicker定义自己的angular时间组件的示例

    这篇文章主要介绍了基于datepicker定义自己的angular时间组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • AngularJS删除路由中的#符号的方法

    AngularJS删除路由中的#符号的方法

    这篇文章主要介绍了AngularJS删除路由中的#符号的方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • 详解Angular组件之投影

    详解Angular组件之投影

    在html规范里面,它定义了非常多的标签,在这些标签里面,相同标签之间的嵌套,不同标签之间的嵌套,是十分常见,在Angular里面,我们可以通过自定义标签的方式引用组件,这里的标签能否像原生的html标签一样,来嵌入html标签,或者嵌套其他组件标签呢?本文将介绍投影的作用。
    2021-05-05
  • AngularJs动态加载模块和依赖注入详解

    AngularJs动态加载模块和依赖注入详解

    这篇文章主要为大家介绍了AngularJs动态加载模块和依赖注入,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • AngularJS Ajax详解及示例代码

    AngularJS Ajax详解及示例代码

    本文主要讲解AngularJS Ajax的知识,这里提供详细资料及代码示例,帮助学习AngularJS的朋友,有需要的小伙伴可以参考下
    2016-08-08

最新评论