使用模态

模式在屏幕外滑动以显示临时 UI,通常用于登录或注册页面,消息撰写和选项选择。

import { ModalController } from 'ionic-angular';
import { ModalPage } from './modal-page';

export class MyPage {
  constructor(public modalCtrl: ModalController) {
  }

  presentModal() {
    let modal = this.modalCtrl.create(ModalPage);
    modal.present();
  }
}

注意:模态是一个覆盖用户当前页面的内容窗格。

通过模态传递数据

数据可以通过 Modal.create() 作为第二个参数传递给新模态。然后可以通过注入 NavParams 从打开的页面访问数据。请注意,作为模态打开的页面中没有特殊的模态逻辑,但使用 NavParams 与标准页面没有区别。

第一页:

import { ModalController, NavParams } from 'ionic-angular';

export class HomePage {

 constructor(public modalCtrl: ModalController) {

 }

 presentProfileModal() {
   let profileModal = this.modalCtrl.create(Profile, { userId: 8675309 });
   profileModal.present();
 }

}

第二页:

import { NavParams } from 'ionic-angular';
export class Profile {

 constructor(params: NavParams) {
   console.log('UserId', params.get('userId'));
 }

}