相思资源网 Design By www.200059.com

1.Ionic3.x 页面正向传值

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

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种方法,当然还有其它方法,如果你有更好 的方法,欢迎留言讨论,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。

标签:
ionic3反向传值,ionic3,pop传值,ionic,pop,传值

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

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

暂无Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。