Ionic 4 Angular - 如何自动关闭模态框

Question

在Ionic 3中，关闭弹出框非常简单：

constructor(viewCtrl: ViewController) {
    this.viewCtrl.dismiss()
}

在Ionic 4中，我无法导入ViewController（或准确地说，我的IDE尝试导入ViewController的类型）。我想知道解除模态框的新方法是什么。

- Eliya Cohen

Answer 1

根据文档，看起来 dismiss 方法已经移动到 ModalController 了。

所以要关闭一个模态框，我需要执行以下步骤：

constructor(modalCtrl: ModalController) {
  modalCtrl.dismiss();
}

多么讽刺，我在发布问题之后才找到了答案。

- Eliya Cohen

---

@MohamedSaleh https://ionicframework.com/docs/api/modal-controller - Eliya Cohen

@Elliya，我已经成功完成它了，但是我是通过从onclick函数中调用dismiss而不是像你建议的那样完成的。 - Mohamed Saleh

如何使用Ionic FTFY。 - Michael Artman

@Michael Artman 已修复。 - Eliya Cohen

Answer 2

看起来这里缺少 Ionic v4 文档，但我相信从模态框中访问 dismiss 的正确方法是：

import { Components } from '@ionic/core';

@Component({
  selector: 'app-some-modal',
  templateUrl: 'some-modal.component.html',
  styleUrls: ['some-modal.component.scss']
})
export class SomeModalComponent {
  // modal is available here where created with:
  // modalController.create({ component: SomeModalComponent})
  @Input() modal: Components.IonModal;

  onCancel = () =>
    this.modal.dismiss('cancel');
}

虽然modal实际上是HTMLIonModalElement类型，但由于某些原因它对WebStorm/IntelliJ不可见，因此我使用Components.IonModal，因为HTMLIonModalElement应该是全局的。

- ciekawy

---

谢谢@ciekawy - 当Google将v4文档优先于v3文档，并且有足够的Stack Overflow答案来填补缺失文档的空白时，使用Ionic将会非常有趣！:D - Grant

从未来的角度来看，这仍然是一场噩梦，因为每9个月框架都会完全重构。 - John

Answer 3

在ionic v4中关闭模态框，请在您的ionic模态框组件中执行以下操作。

    export class ExampleModalComponent implements OnInit {
      constructor(private navCtrl: NavController, private modalCtrl: ModalController) {

      }

      async closeModal() {
        await this.modalCtrl.dismiss();
      }
    }

In Your Components HTML the button should look something like this.

<ion-button (click)="closeModal()">
  <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
</ion-button>

- paulobunga

Answer 4

您可以像这样使用self来关闭模态框。

constructor(
    private modal: ModalController,
) { }

dismiss() {
    this.modal.dismiss();
}

- Tommy Wong

Answer 5

在ionic 6中

模态框可以通过(click)="modal.dismiss()"来关闭：

<ion-modal #modal [keepContentsMounted]="true" (click)="modal.dismiss()">

- sadalsuud