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();
}

在我发布问题后,我发现答案是多么讽刺.

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

消除 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>