Ionic4Beta版官方文档提供了例子代码,首先定义一个ModalPage组件,并在需要弹出的组件上import该page组件,Modal框通过HTML中click点击触发异步函数presentModal(),并可以传递参数。重点与Ionic3的区别在于Modal框的关闭在Ionic4中直接modalController.dismiss()关闭而不是在ModalPage中再定义一个ViewController.dismiss();
import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPage } from '../modal/modal.page';
@Component({
selector: 'modal-example',
templateUrl: 'modal-example.html',
styleUrls: ['./modal-example.css']
})
export class ModalExample {
constructor(public modalController: ModalController) {}
async presentModal() {
const modal = await this.modalController.create({
component: ModalPage,
componentProps: { value: 123 }
});
return await modal.present();
}
}