1.Ionic3.x 页面正向传值

关于正向传值,上一篇文章里面有讲,具体可以看这里
https://segmentfault.com/a/11...

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个方法 

  • 发布publish(topic, eventData)

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

  • 订阅 subscribe(topic, handler)

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

  • 取消订阅 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种方法,当然还有其它方法,如果你有更好 的方法,欢迎留言讨论

**愿你成为终身学习者**

Angular4.x+Ionic3 踩坑之路之 Ionic3.x pop反向传值的更多相关文章

  1. Angular4.x+Ionic3 踩坑之路之打包时出现JAVASCRIPT HEAP OUT OF MEMORY的几种解决办法

    最近开发的一个比较大型的App时打生产环境包是出现内存不足导致打包失败的问题.然后百度发现解决方法都是一样,自己试了一下都没什么暖用,心里只想用呵呵来形容了.最后经朋友介绍,技术问题还得去谷歌,git ...

  2. html2canvas的踩坑之路

    html2canvas的踩坑之路 前言 早有耳闻这个html2canvas比较坑,但无奈于产品需求的压迫,必须实现html转图片的功能,自此走上了填坑之路,好在最后的效果还算令人满意,这才没有误了产品 ...

  3. MySQL Connector/NET 使用小结(踩坑之路)

    背景描述 根据项目的需要,需连接MySQL获取数据. 首先,先了解一下项目的情况: 之前的代码是C#编写的的, 运行时:.NETFramework3.5. 由于项目已经部署上线,因此不能升级运行时,这 ...

  4. Android 上传开源项目到 jcenter 实战踩坑之路

    本文微信公众号「AndroidTraveler」首发. 背景 其实 Android 上传开源项目到 jcenter 并不是一件新鲜事,网上也有很多文章. 包括我本人在将开源项目上传到 jcenter ...

  5. Java踩坑之路

    陆陆续续学Java也快一年多了,从开始的一窍不通到现在的初窥门径,我努力过,迷茫过,痛过,乐过,反思过,沉淀过.趁着新年,我希望能把这些东西记下来,就当是我一路走来的脚印. 一.初识网站应用 记得第一 ...

  6. Android SDK 开发——发布使用踩坑之路

    前言 在 Android 开发过程中,有些功能是通用的,或者是多个业务方都需要使用的. 为了统一功能逻辑及避免重复开发,因此将该功能开发成一个 SDK 是相当有必要的. 背景 刚好最近自己遇到了类似需 ...

  7. jQuery升级踩坑之路

    1.使用了被废弃的jQuery.browser属性 jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support . 在更 ...

  8. Mahout踩坑之路

    一.版本对比 公司版Mahout 由于Mahout只能允许于hadoop0.20以上版本上,而百度的hadoop是hadoop0.19的一个分支.因此百度HPC组曾经将Mahout移植到百度的hado ...

  9. webpack踩坑之路——构建基本的React+ES6项目

    转自:http://www.cnblogs.com/ghost-xyx/p/5483464.html webpack是最近比较火的构建工具,搭配上同样比较火的ReacJS与ES6(ES2015)一定是 ...

随机推荐

  1. 用xcode打包完成,出现的Archive界面怎么打开?

    要出现这个界面 只需在xcode界面进入windows 的下拉菜单Organizer

  2. 导包、时间模块【TIME、CALENDAR DATETIME】、SYS、OS, OS.PATH模块、项目开放周期&规范

    导包 1.不考虑包的情况下直接from...直接导入文件夹下的具体模块 2. if  __name__ == '__ma__'    # 自执行 if  __name__ == '模块名'    # ...

  3. meta viewport移动端自适应

    参考链接:https://www.jianshu.com/p/561357d7cd7b

  4. linux运维、架构之路-Lnmp架构部署

    一.Lnmp架构原理 二. Lnmp架构软件安装 1.Nginx安装脚本 #!/bin/bash useradd -s /sbin/nologin -M www mkdir -p /server/to ...

  5. oracle数据区间

    区是段下面的一个管理单位,一个区在物理上是一段连续的数据块. 一个数据文件有一个文件头,它用了若干个数据块,这个文件头里记录着区的分配与释放的信息.在这个文件中有些区是被使用的,有些区是空闲的. 什么 ...

  6. Centos 安装Pycharm 并移动到桌面。

    版权声明:版权所有.未经同意不得转发,装载 https://blog.csdn.net/limingyue0312/article/details/81805826 1.下载pycharm软件包 网页 ...

  7. java循环队列实现代码

    public class Queue { //队首指针 private int front; //队尾指针 private int rear; //数组 private int[] arr; //数组 ...

  8. myeclipse使用db-brower连接到sqlserver2012踩坑经历

    myeclipse使用db-brower连接到sqlserver踩坑经历 首先得建立个角色 右键->创建登录名 权限开大点 连接设置 Driver template选择我选这个,格式按照我的写 ...

  9. 02:linux常用命令

    1.1 linux查看系统基本参数常用命令 1.查看磁盘 [root@linux-node1 ~]# df -hl Filesystem Size Used Avail Use% Mounted on ...

  10. nginx配置一般优化参数

    #user nobody; worker_processes 2; # CPU亲和力,worker_processes最多开启8个,注意写法 worker_cpu_affinity 01 10; wo ...