ionic3 实现页面间传值

在 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();
}

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 167,438评论 24 706
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 131,763评论 18 138
  • jQuery学习笔记第一节/简介 1.基本概念 1.什么是JQ?JQ 是一个优秀的第三方库,大型开必备. 2.JQ...
    iplaycodex阅读 232评论 0 1
  • 那座城墙很高 连心都跳不过去 远看,它其实是你的眉毛 紧锁着古老的世界 那座城墙很高 连鸟都飞不过去 远看,它其实...
    三尺冷阅读 166评论 0 2
  • 应某电脑小白之托,特意写了这篇文章给各位想要了解电脑装windows系统的朋友。其实安装windows系统的方式非...
    小小奶狗阅读 300评论 0 3
  • 离开托木斯克后我们继续西行,用时三天行驶1700多公里,经新西伯利亚和库尔干,到达位于连接俄罗斯欧亚两部分的西伯利...
    忘川卡隆阅读 150评论 0 1