使用Angular关闭Modal - Ionic 4

在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。