为了账号安全,请及时绑定邮箱和手机立即绑定

ionic3 实现页面间传值

标签:
WebApp

在 ionic 中,页面跳转一般有两种形式 ModalController 和 NavController。接下来分别介绍一下这两种跳转如何正向传值和反向传值。

ModalController

ModalController 通常用于选择或编辑某项目。它不可以被重复使用,并且当他dismiss后会被彻底销毁。

正向传值

首先在第一个页面引入 ModalController

import { ModalController } from 'ionic-angular';constructor(public modalCtrl: ModalController) {}

然后在跳转页面的地方使用以下方法

let data: Object = {  username: '张三'};let profileModal = this.modalCtrl.create(ModPage, data);
profileModal.present();

来到第二个页面。引入 NavParams 和 ViewController

import { NavParams, ViewController } from 'ionic-angular';constructor(public navParams: NavParams, 
            public viewCtrl: ViewController) {}

接下来使用 NavParams 获取上一个页面传递的值。成功的话应该可以在页面上看到用户名:张三

ionViewDidLoad() {  let modelData: string = '用户名:' + this.navParams.get('username');  console.log(modelData);
}

在需要关闭页面时,调用以下方法即可

this.viewCtrl.dismiss();

反向传值

ModalController 实现反向传值比较简单,首先改造一下 第二个页面的 dismiss() 方法

let data: Object = { info: '返回的消息' };this.viewCtrl.dismiss(data);

然后再修改一下第一个页面的 create() 方法即可,成功的话可以看到控制台输出返回的消息

let data: Object = {  username: '张三'};let profileModal = this.modalCtrl.create(ModPage, data);
profileModal.onDidDismiss(data => {  console.log(data.info);
});
profileModal.present();

NavController

NavController 是最基本的页面跳转方式。基本的使用方法就是通过push进入新的页面,pop回到上一个页面。我们push的时候,堆栈中就加入了一个新的界面,pop的时候会把最后的一个页面移除以返回上一个页面。

正向传值

首先在第一个页面引入 NavController

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

然后在跳转页面的地方使用以下方法

let data: Object = {  username: '张三'};this.navCtrl.push(NavPage, data);

来到第二个页面。引入 NavParams 和 NavController

import { NavParams } from 'ionic-angular';constructor(public navParams: NavParams) {}

与 ModalController 一样,使用 NavParams 获取上一个页面传递的值。成功的话应该可以在页面上看到用户名:张三

ionViewDidLoad() {  let modelData: string = '用户名:' + this.navParams.get('username');  console.log(modelData);
}

在需要关闭页面时,不需要做更多操作。因为这种方法跳转的页面,ionic 会自动在左上角生成返回按钮。如果需要自己控制返回,使用以下方法即可

this.navCtrl.pop();

反向传值

按照产品设计来讲,需要反向传值一般会使用 ModalController。所以 NavController 并没有提供可以直接使用的方法,需要我们自己实现。实现方法有很多,这里我简单介绍一种

首先来到第一个页面,将跳转的方法进行以下修改

let data: Object = {  username: '张三',  callback: data => {    console.log(data.info);
  }
};this.navCtrl.push(NavPage, data);

然后来到第一个页面,手动制作一个返回按钮,并使用以下方法作为 click 事件

popData() {  let callback = this.navParams.get('callback');  let data: Object = {    info: '返回的消息'
  };
  callback(data);  this.navCtrl.pop();
}

成功的话可以看到控制台输出返回的消息



作者:Snorlax丶
链接:https://www.jianshu.com/p/8bf31fc8d8a8


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消