Ionic中使用NavController进行反向传值

ionic中使用NavController进行导航,经过poppush来进行页面切换。前端

正向传值

正向传值很简单,push方法中将数据做为第二个参数传入便可;在下一个页面中使用NavParams来接收数据cookie

import { NavController } from 'ionic-angular';
constructor(public navCtrl: NavController) {}

let data: Object = {  info: '这是要传递的数据'};
this.navCtrl.push(NavPage, data);

反向传值

反向传值,也就是在使用pop方法时,将数据传回上一个页面闭包

注意:通常来讲,须要方向传值的时候,使用ModalController便可。固然也有其余的办法,好比localstoragecookie@Output或者单例服务。ionic

具体代码以下函数

// 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做为会回调函数传入新页面。this

我粗略看了一下ionic的源码(ionic3),ModalController也是用这种方式来传递数据的。localstorage

因为前端基础不扎实,对闭包了解不深,因此不敢妄下判断,有错误,请各位大神指正。code

相关文章
相关标签/搜索