ionic 4/5 避免多個警報/彈出框/模態提示

Question

你知道如何避免多次提示警報/彈出框/模態嗎？

我在 ionic4/5 中找不到任何示例。

private async alertCtrlDispatchNavigateAfterLogout(msg:string):Promise<HTMLIonAlertElement>{
  let alert = await this.alertCtrl.create({
    cssClass: "ge-session-timeout-alert",
    backdropDismiss: false,
    subHeader: msg,
    buttons: [
      {
        text: 'OK',
        role: 'cancel',
        handler: () => {
          this.store.dispatch(new RouterActions.NavigateAfterLogout(true));
        }
      }
    ],
  });
  await alert.present();
  return alert;
}

Answer 1

您可以參考下面用 ionic 3 編寫的示例代碼，同樣的想法也適用於 Ionic 4/5，其中 alertPresented 標志防止出現多個實例

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

import { AlertController } from 'ionic-angular';

@Injectable()
export class Alert {
  public alertPresented: any;
  constructor(public alertCtrl: AlertController) {
    this.alertPresented = false
  }

  present(title, subTitle) {
    let vm = this
    if(!vm.alertPresented) {
      vm.alertPresented = true
      vm.alertCtrl.create({
        title: title,
        subTitle: subTitle,
        buttons: [{
          text: 'OK',
          handler: () => {
            vm.alertPresented = false
          }
        }],
      }).present();
    }
  }
}

Answer 2

您需要首先檢查是否出現任何警報/彈出框/模態然后關閉

const checkPropmt = await this.alertCtrl.getTop();
if(checkPropmt){
  this.alertCtrl.dismiss();
}

上面的代碼關閉警報或 model。