Question

在Ionic 3中，消除模态非常简单：

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

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

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

Answer 1

根据文档，看来dismiss方法已移至ModalController。

所以要消除模态，我需要这样做：

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

发布问题后发现答案很讽刺。

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应该是全局的，但由于某种原因它对于WebStorm / IntelliJ是不可见的

Answer 3

消除离子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-如何自我解散模态

4 个答案: