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

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

1，发送界面ts

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

2，接收界面ts

 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跳转页传值内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Angular5路由传值方式及其相关问题

    目前Angular已经升级到了稳定版本Angular5,这次升级更小更快以及更稳定!路由可以说是Angular甚至是单页应用的核心部分了吧!在angularjs中的路由最大的缺点就是无法嵌套路由,在Angular中解决了这个问题!在Angular中路由不仅仅是页面跳转,其中还有一项叫英雄列表跳转英雄详情!在诸多的列表,不可能给每个英雄做一个详情页,于是乎路由参数起到作用了!通过路由传入参数识别那个英雄的详情! 现在对于路由传值进行详解,首先一种方式是官网的导航到详情的单值id传入,另一种是多数据

  • Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解

    1.Ionic3.x中页面(组件)之间正向传值方式? 这里所说的正向传值指的是如有两个页面,我们简称 页面A 和 页面B,正向指的是A跳转到B,比如一个商品跳转这个商品的详情页面. 正向传值Ionic3.x主要有2种 标签上直接跳转 Js跳转 1) 标签上直接跳转 Ionic3.x对Angular2以上的的路由进一步封装,路由跳转主要是由模块 NavController 来完成的,传递参数主要是由模块 NavParams 来完成的,用法如下 A页面内容: htmll:代码 <button [na

  • Angular页面间切换及传值的4种方法

    本文实例为大家分享了Angular JS页面间切换及传值 的方法,供大家参考,具体内容如下Angular JS页面间切换及传值 1. 基于ui-router的页面跳转传参 (1) 在AngularJS的app.js中用ui-router定义路由,比如现在有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的producer页,同时将producerId这个参数传过去. state('producers', { url: '/produ

  • Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解

    1.Ionic3.x 页面正向传值 关于正向传值,上一篇文章里面有讲,具体可以看这里:http://www.jb51.net/article/136302.htm 2.Ionic3.x 页面 pop反向传值,主要有两种方式 1 .利用ES6提供 Promise 对象 2 利用Ionic3.x提供Event对象,观察者模式(publish/subscribe) 1)利用ES6提供 Promise 对象 这边假设有两个页面A页面, B页面, 情景如下,A跳转B页面,在B页面返回A页面需要给A页面选回

  • angular中不同的组件间传值与通信的方法

    本文主要介绍angular在不同的组件中如何进行传值,如何通讯.主要分为父子组件和非父子组件部分. 父子组件间参数与通讯方法 使用事件通信(EventEmitter,@Output): 场景:可以在父子组件之间进行通信,一般使用在子组件传递消息给父组件: 步骤: 子组件创建事件EventEmitter对象,使用@output公开出去: 父组件监听子组件@output出来的方法,然后处理事件. 代码: // child 组件 @Component({ selector: 'app-child',

  • Angular.js中控制器之间的传值详解

    前言 每个controller都会有自己的scope,所有的scope都是属于 $rootScope的子或者子的子... 那么问题就好解决了,通过 $rootScope.$broadcast 广播的事件每个controller都能收到事件 另外,我的经验是,尽量不要用event传数据.应该建立一个service来保存数据,并且设置相应getter/setter,具体如下: 每个controller依赖service, call service.setter(...) 统一的service.set

  • 详解AngularJS跨页面传值（ui-router）

    博主用的ionic 这里使用ui-router传值,用来在跳转页面的同时带着你想带走的东西一起跳走 (PS:博主半路出家,尚是菜鸟,写的东西自己跑起来并没有什么问题但不敢保证写的一定对,语言也很随意,仅供参考.另,期待各位前辈的指教) 博主用的ionic 这里使用ui-router传值,用来在跳转页面的同时带着你想带走的东西一起跳走 需求是这样的,我有一个商品单子(概览页),点一个商品就可以去看它的详情(详情页) 要解决的问题就是把概览页被点击的商品的id传给详情页,详情页拿着这个id给后台,后

  • angularjs路由传值$routeParams详解

    angularjs路由传值$routeParams详解

    AngularJS利用路由传值,供大家参考,具体内容如下 1.导包 <script src="angular.min.js"></script> <script src="angular-route.js"></script> 2.依赖注入ngRoute var myapp=angular.module("myapp",["ngRoute"]); 3.配置路由 myapp.con

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

    最近,在做电商项目,项目中需要实现:点击编辑按钮,跳转页面完成添加地址,修改地址功能. 使用到angular传参,简单做一总结: 1,发送界面ts //编辑地址 EditorAddress(item) { console.log("选中的地址"); console.log(item); this.router.navigate(['/editor-address'], { queryParams: item }) } 2,接收界面ts public personName:string=

  • Android开发中Activity创建跳转及传值的方法

    Android开发中Activity创建跳转及传值的方法

    在Android系统的江湖中有四大组件:活动(Activity), 服务(Service), 广播接收器(Broadcast Reciver)和内容提供者(Content Provider). 今天所介绍的就是Android开发中的四大组件之一:Activity,其他那三大组件以后再进行介绍.说道Android中的Activity,如果你做过iOS开发的话,Activity类似于iOS中的ViewController(视图控制器).在应用中能看到的东西都是放在活动中的.活动是安卓开发比较重要的东

  • springMvc请求的跳转和传值的方法

    forword跳转页面的三种方式: 1.使用serlvet /** * 使用forward跳转,传递基本类型参数到页面 * 注意: * 1.使用servlet原生API Request作用域 * */ @RequestMapping("/test") public String test(HttpServletRequest request,HttpServletResponse response){ String name = "张小三"; request.set

  • angular+ionic返回上一页并刷新页面

    假定当前页面为editCata页面,要返回的是cataDetail页面.目前我找到两种方法实现返回上一页并刷新,如果以后有其它方法,再继续添加. 1.在editCataCtrl.js中注入$ionicHistory服务. 使用$ionicHistory.goBack()方法即可返回到上一页面. JS端代码: $scope.goBack=function(){ $ionicHistory.goBack(); } HTML代码: <button class="button button-cle

  • angular+ionic 的app上拉加载更新数据实现方法

    第一步,首先需要在<ion-content>标签里面加入标签<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="5%"></ion-infinite-scroll> 里面的属性解释, ng-if  值 布尔型,如果为true,则可以触发上拉事件 on-infinite 上拉时触发的事件 distance 列表底部滚动到可

  • ThinkPHP跳转页success及error模板实例教程

    本文以实例讲解了ThinkPHP跳转页面的success与error方法所对应的视图与控制器的实现方法,通过本实例教程可以帮助读者更好的掌握success方法与error方法的使用. 首先是控制器中,可以使用下代码: <?php // 本文档自动生成,仅供测试运行 class IndexAction extends Action { /** +---------------------------------------------------------- * 默认操作 +----------

  • thinkphp制作404跳转页的简单实现方法

    网上有很多thinkphp的404页面制作方法,但大多太过繁琐不简便,很烦人,所以为大家分享了最便捷的404制作方法,如下. 在thinkphp的公共目录的config配置文件中增加配置项: 'TMPL_EXCEPTION_FILE' => 'Public/404.html', 在Public文件夹中创建404.html内容如下 <!DOCTYPE html > <html> <head> <meta charset=utf-8" /> &l

  • PHP页面输出搜索后跳转下一页的处理方法

    php页面输出时,搜索功能在跳转下一页时,如果不做任何处理,会返回原有是第二页输出的数据,用js来给url加上搜索的条件,保证跳转下一页时输出的是搜索到的数据.以下是js代码 //搜索功能 $("#search").click(function() { //通过id找到搜索的input框 var url = $(this).attr('url'); var query = $('.search-form').find('input').serialize(); query = quer

  • 点选TOP后并不是直接跳到页顶的，而是滚动上去的

    如果网页太长了,一般都使用锚标签快速返回到TOP <a href="#header" title="back to top">top</a> 确实很简单,不过却有一些高手让这个简变成不简单: 国外演示地址:http://tonyyoo.com/v2/ 点选TOP后并不是直接跳到页顶的,而是滚动上去的..而且距离页顶越长滚动的速度也就越快... 研究了下,用到的JS有4个: <script type="text/javascri

  • Layui数据表格跳转到指定页的实现方法

    1.获取数据表格下分页组件中的页码输入框,具体元素在Elements中位置如下 2.获取上述input并设置其value属性值为目标跳转页面页码 $(".layui-laypage-skip").find("input").val(目标跳转页面页码 ); 3.触发跳转按钮的click事件 $(".layui-laypage-btn").click(); 备注:页码输入框和跳转按钮位置 以上这篇Layui数据表格跳转到指定页的实现方法就是小编分享给

随机推荐