Ionic 4 Angular - 如何自行关闭模态

Question

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

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

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

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

Answer 1

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

所以要关闭模态，我需要做：

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

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

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 类型，但我正在使用 Components.IonModal 因为 HTMLIonModalElement 应该是全局的，但它对 [=20= 不可见] 出于某种原因。

Answer 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>

Answer 4

您可以像这样使用自动关闭模态。

constructor(
    private modal: ModalController,
) { }

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

Ionic 4 Angular - 如何自行关闭模态

Ionic 4 Angular - How to self dismiss a modal

angular

ionic-framework

ionic4