Ionic 4 Angular - 如何自我关闭模态答案

【问题标题】：Ionic 4 Angular - How to self dismiss a modalIonic 4 Angular - 如何自我关闭模态
【发布时间】：2021-09-29 02:09:42
【问题描述】：

在 Ionic 3 中，关闭模式非常简单：

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

在 Ionic 4 中，我无法导入 ViewController（或者准确地说，我的 IDE 尝试导入一种 ViewController）。

我想知道解除模式的新方法是什么。

【问题讨论】：

标签： angular ionic-framework ionic4

【解决方案1】：

根据文档，dismiss 方法似乎已移至 ModalController。

所以要关闭一个模态，我需要这样做：

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

我在发布问题后如何找到答案。

【讨论】：

@MohamedSaleh ionicframework.com/docs/api/modal-controller
@Elliya 我已经设法做到了，但是不像你建议的那样从 onclick 函数调用解除
离子* FTFY
@Michael Artman 已修复

【解决方案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 类型，但我使用的是Components.IonModal，因为HTMLIonModalElement 应该是全局的，但由于某种原因它对WebStorm/IntelliJ 不可见。

【讨论】：

谢谢@ciekawy - 有一天，当 Google 优先考虑 v4 而非 v3 文档并且有足够的 Stack Overflow 答案来填补使用 Ionic 缺失文档的空白时，将会非常有趣！ :D
从未来开始写作，这仍然是一场噩梦，因为该框架每 9 个月就会彻底改造一次。

【解决方案3】：

在 ionic v4 中关闭模式。在您的离子模式组件中执行以下操作

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

      }

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

在您的组件 HTML 中，按钮应如下所示。

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

【讨论】：

【解决方案4】：

你可以像这样使用自我关闭模式。

constructor(
    private modal: ModalController,
) { }

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

【讨论】：