Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
1.Ionic3.x 页面正向传值
关于正向传值,上一篇文章里面有讲,具体可以看这里
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(ic, eventData)
`参数一是发布事件名字,第二个参数就是要发送数据,其实还可以传送第三,第四...等,都 是可以传送数据的
2.订阅 subscribe(ic, handler)
参数一是要接收的事件铝管,第二个参数代表发布时传送的参数,如果发布有传第三个参数,同样的订阅的第三个参数就是对应的发布的第三个参数,以此类推....`
3.取消订阅 unsubscribe(ic, 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种方法,还有其它方法,如果你有更好 的方法,欢迎留言讨论,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对狼蚁SEO的支持。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程