在Ionic 4中,使用Angular关闭Modal有几种方法。
方法1:使用dismiss()方法关闭Modal 在打开Modal时,可以通过ModalController的create()方法创建一个Modal实例,并通过present()方法将其显示出来。要关闭Modal,可以在Modal实例上调用dismiss()方法。
import { ModalController } from '@ionic/angular';
constructor(private modalController: ModalController) {}
async openModal() {
const modal = await this.modalController.create({
component: MyModalComponent
});
await modal.present();
}
closeModal() {
this.modalController.dismiss();
}
方法2:使用dismiss()方法传递数据关闭Modal 如果需要在关闭Modal时传递一些数据给父页面,可以在dismiss()方法中传递一个参数。
closeModal() {
this.modalController.dismiss({
data: 'Some data'
});
}
在父页面中,可以通过onDidDismiss()方法来获取传递的数据。
async openModal() {
const modal = await this.modalController.create({
component: MyModalComponent
});
modal.onDidDismiss().then((data) => {
console.log(data);
});
await modal.present();
}
方法3:使用dismiss()方法关闭带有返回值的Modal 如果需要在关闭Modal时返回一些数据给父页面,可以在dismiss()方法中传递一个参数。
closeModal() {
this.modalController.dismiss({
data: 'Some data'
});
}
在父页面中,可以通过onWillDismiss()方法来获取返回的数据。
async openModal() {
const modal = await this.modalController.create({
component: MyModalComponent
});
modal.onWillDismiss().then((data) => {
console.log(data);
});
await modal.present();
}
以上是使用Angular关闭Modal的几种方法。在Ionic 4中,ModalController是一个重要的组件,可以方便地创建和管理Modal。更多关于ModalController的信息和使用方法,可以参考腾讯云的Ionic文档:ModalController - Ionic 4。
领取专属 10元无门槛券
手把手带您无忧上云