在 Ionic 的模態之外單擊時如何防止模態消失？

Question

我正在構建一個簡單的移動應用程序，在主頁和模式頁面之間傳遞數據。 雖然它在移動設備上運行良好，但在大屏幕上，模態不會填滿整個屏幕。 因此，用戶可以在屏幕外單擊以關閉模式，這不會觸發我應該在模式關閉時觸發的任何功能。 我的問題是，如何禁用在模態外單擊。 我不希望模式在點擊外部時關閉，但只有在點擊我的“關閉”按鈕時才會關閉。 我的模態設置為：

在主頁上：

open(){
    let modal = this.modalCtrl.create(ModalPage,
        {
            firstName: this.user.firstName,
            lastName: this.user.lastName,
            location: this.user.location
        });
    modal.onDidDismiss(data => {
            this.user.firstName = data.firstName;
            this.user.lastName = data.lastName;
            this.user.location = data.location;
    });
    modal.present();
}

在模態頁面上：

closeModal() {
    let data = {
        firstName: this.user.firstName,
        lastName: this.user.lastName,
        location: this.user.location
    }
    this.viewCtrl.dismiss(data);
}

我覺得這應該是很簡單的東西，但是我在網上找不到任何資源，而且Ionic 2 Doc也不是很清楚。 請幫忙。

Answer 1

在創建模式時使用enableBackdropDismiss -option（ 鏈接到文檔）。

let modal = this.modalCtrl.create(ModalPage, { data: data }, { enableBackdropDismiss: false });

離子4

const modal = await this.modalCtrl.create({
  component: ModalPage,
  componentProps: {
    'data': this.data 
  },
  backdropDismiss:false
});

Answer 2

對於離子 4

backdropDismiss:false,

應該像這樣創建模型

 const modal = await this.modalCtrl.create({
      component: SetaddresComponent,
      cssClass: 'my-custom-modal-css',
      componentProps: { },
      showBackdrop:true,
      backdropDismiss:false,
    },

Answer 3

我的問題是在 Ionic 6 中使用以下代碼解決的

<ion-modal [isOpen]="true" [swipeToClose]="true" [backdropDismiss]="false" [breakpoints]="[0.1, 0.3, 1]"  [initialBreakpoint]="0.3">

這是那個的主要關鍵字

[backdropDismiss]="false"