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

Ionic4 Modal使用详解
本文详细介绍了Ionic4 Beta版中Modal组件的使用方法,包括如何定义ModalPage组件、在需要弹出的组件上import该page组件,以及通过HTML中click点击触发异步函数presentModal()来展示Modal框。特别指出,Ionic4中Modal框的关闭方式已更新为直接使用modalController.dismiss(),不再需要在ModalPage中定义ViewController.dismiss()。
747





