如何關閉離子卡模態？

Question

modal.page.html

<ion-content>
  <ion-button id="trigger-button">Click to open modal</ion-button>
  <ion-modal trigger="trigger-button" [swipeToClose]="false" [presentingElement]="routerOutlet.nativeEl">
    <ng-template>
      <ion-content>
        <ion-grid>
          <ion-row class="">
            <ion-col size="4" class="ion-float-left">
              <ion-text color="primary"><h6 class="ion-no-margin fw-400">Cancel</h6></ion-text>
            </ion-col>
            <ion-col size="4" class="ion-text-center">
              <ion-text><h6 class="ion-no-margin fw-500">Card Modal</h6></ion-text>
            </ion-col>
            <ion-col size="4" class="ion-text-end">
              <ion-text color="muted"><h6 class="ion-no-margin fw-400">Done</h6></ion-text>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-content>
    </ng-template>
  </ion-modal>
</ion-content>

modal.page.ts

import { Component, OnInit } from '@angular/core';
import { IonRouterOutlet, ModalController } from '@ionic/angular';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.page.html',
  styleUrls: ['./modal.page.scss'],
})
export class ModalPage implements OnInit {

  constructor( public routerOutlet: IonRouterOutlet ) {  }  
  
  ngOnInit() {
  }

}

模態在單擊“單擊以打開模態”按鈕時打開。 我想在“取消”點擊時關閉模式。

如何解除 ionic V6 卡模態？

Answer 1

您需要導入並聲明 ModalController 並使用this.modalCtrl.dismiss()將其關閉。

import { Component } from '@angular/core';

import { ModalController } from '@ionic/angular';

@Component({
  selector: 'app-modal-example',
  templateUrl: 'modal-example.component.html',
})
export class ModalExampleComponent {
  name: string;

  constructor(private modalCtrl: ModalController) {}

  cancel() {
    return this.modalCtrl.dismiss(null, 'cancel');
  }

  confirm() {
    return this.modalCtrl.dismiss(this.name, 'confirm');
  }
}