Ionic中使用NavController进行反向传值
ionic中使用NavController
进行导航,通过pop
、push
来进行页面切换。
正向传值
正向传值很简单,push
方法中将数据作为第二个参数传入即可;在下一个页面中使用NavParams
来接收数据
import { NavController } from 'ionic-angular'; constructor(public navCtrl: NavController) {} let data: Object = { info: '这是要传递的数据'}; this.navCtrl.push(NavPage, data);
反向传值
反向传值,也就是在使用pop
方法时,将数据传回上一个页面
注意:一般来说,需要方向传值的时候,使用ModalController
即可。当然也有其他的办法,比如localstorage
、cookie
、@Output
或者单例服务。
具体代码如下
// first page this.navCtrl.push(NextPage, { callback: (data) => { // ...处理data console.log(data); } }) // next page:popPage为监听返回按钮的处理事件 popPage() { let callbackFunc = this.navParams.get('callback'); let popData = {info: '这是要传回的数据'}; callback(popData); this.navCtrl.pop(); }
这里是利用闭包来实现数据的传递,callback作为会回调函数传入新页面。
我粗略看了一下ionic的源码(ionic3),ModalController也是用这种方式来传递数据的。
由于前端基础不扎实,对闭包了解不深,所以不敢妄下判断,有错误,请各位大神指正。
相关推荐
绿豆饼 2020-07-28
半纸药笺 2020-07-26
半纸药笺 2020-06-14
芯果科技蔡彦 2020-04-30
芯果科技蔡彦 2020-04-14
kfq00 2020-04-10
samllcat 2020-03-27
ZillahV0 2016-08-27
半纸药笺 2019-11-18
qixiang0 2015-04-24
shichong 2015-05-14
庆华 2015-12-26
genglang 2016-05-01
琪凡睿 2016-04-28
GoDotDotDot 2018-12-12
WarmPure 2018-10-02
青 2017-09-19
GoDotDotDot 2017-07-21