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


Posted in Javascript onMarch 13, 2018

1.Ionic3.x 页面正向传值

关于正向传值,上一篇文章里面有讲,具体可以看这里:https://3water.com/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页面选回的值。

A页面代码

html内容

<button (tap)="goToBPage()">跳转到B页面</button>

ts 内容:

import BPage from './BPage'
export class APage{
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
// 用于pop 回调的 block
callBackFromB =(params) => {
 return new Promise((resolve, reject) => {
 if(params){
  resolve('成功取到B页面返回的参数');
  console.log('B页面参数为: '+ params);
 }else{
  reject(‘取回B页面数据失败')
 }
 });
 }
 goToBPage (){
 this.navCtrl.push(BPage, {
 callback: this.callBackFromB
 })
 }
}

备注:Promise是由Es6提供的一个对象,new一个对象,有两个回调函数,一个是resove,一个是reject,resove是执行成功的回调,也就是我们调用 then执行的方法, reject是执行失败的回调,对应 是调用 catch方法 ,现在es7新出一async和await,async是对Promise的进一步封装,详情可具体看官方文档!

B页面代码

ts 内容:

constructor(public navCtrl: NavController, public navParams: NavParams) {
// 获取对面A传过来的回调方法
 this.callback = this.navParams.get("callback")
 
}
 goBack(){
 let param = '我是要给A页面数据'
 this.callback(param).then(()=>{
 // pop返回方法
 this.navCtrl.pop();
 });
 }

1)利用Ionic3.x提供Event对象,观察者模式(publish/subscribe)

event对象主要有3个方法

1.发布publish(topic, eventData)

`参数一是发布事件名字,第二个参数就是要发送数据,其实还可以传送第三,第四...等,都 是可以传送数据的

2.订阅 subscribe(topic, handler)

参数一是要接收的事件铝管,第二个参数代表发布时传送的参数,如果发布有传第三个参数,同样的订阅的第三个参数就是对应的发布的第三个参数,以此类推....`

3.取消订阅 unsubscribe(topic, handler)

参数一是要取消订阅的事件的名称,第二是一个回调函数,返回值:如果被移除成功,返回true
实现反向传值代码如下

A页面代码

ts代码

goToBPage(){
 this.events.subscribe('bevents', (params) => {
  // 接收B页面发布的数据
  console.log('接收数据为: '+ paramsVar);

  // 取消订阅
  this.events.unsubscribe('bevents'); 
 })
 this.navCtrl.push(BPage);
 }

B页面代码

ts代码

goBack(){
 this.navCtrl.pop().then(() => {
 // 发布 bevents事件
 this.events.publish('bevents', '我是B页面数据');
 });
}

总结

以上主要介绍反向传值的2种方法,当然还有其它方法,如果你有更好 的方法,欢迎留言讨论,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
使用express来代理服务的方法
Jun 21 Javascript
关于JS中的作用域中的问题思考分享
Apr 06 Javascript
vue加载自定义的js文件方法
Mar 13 #Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 #Javascript
vue页面离开后执行函数的实例
Mar 13 #Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 #Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 #Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 #Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 #Javascript
You might like
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
用js解决数字不能换行问题
2010/08/10 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
sails框架的学习指南
2014/12/22 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
利用Python学习RabbitMQ消息队列
2015/11/30 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
在python中pandas的series合并方法
2018/11/12 Python
Python实战购物车项目的实现参考
2019/02/20 Python
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
前台接待岗位职责
2013/12/03 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
十周年庆典策划方案
2014/06/03 职场文书
综治工作心得体会
2014/09/11 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
2016党员党课心得体会
2016/01/07 职场文书
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫