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 相关文章推荐
FireFox JavaScript全局Event对象
Jun 14 Javascript
js null undefined 空区别说明
Jun 13 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
Javascript获取表单名称(name)的方法
Apr 02 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 Javascript
十分钟教你上手ES2020新特性
Feb 12 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 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中使用Oracle数据库(5)
2006/10/09 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
node.js学习总结之调式代码的方法
2014/06/25 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
node.js部署之启动后台运行forever的方法
2018/05/23 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
Python 内存管理机制全面分析
2021/01/16 Python
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
《要下雨了》教学反思
2014/02/17 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
竞选班委演讲稿
2014/04/28 职场文书
销售经理工作检讨书
2015/02/19 职场文书
关于召开会议的通知
2015/04/15 职场文书
2015年教师国培感言
2015/08/01 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL