防止多个Ionic警报叠加显示

Question

如何检测Ionic 2的警报UI组件实例是否已经打开，以便不再显示另一个警报？

- Evan Lévesque

Answer 1

我最终编写了一个类似于以下方式的Ionic Alert控制器的外包提供程序：

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

alertPresented标志位防止出现多个实例

- Evan Lévesque

---

这只会阻止新警报的创建。这不会自动解除旧警报并呈现最新的警报，对吗？ - Mohammed Azhar

有没有想法自动关闭旧的警报并显示新的警报？ - Mohammed Azhar

我已经为此创建了一个问题：https://stackoverflow.com/questions/45919152/dismiss-old-alert-and-present-latest-alert-ionic3 - Mohammed Azhar

Answer 2

我有另一个想法，你可以为变量分配消息并检查新消息是否与它相等。如果相等，则返回。这是我的代码，希望你喜欢它。

import { Injectable } from '@angular/core';
import { AlertController } from 'ionic-angular';

@Injectable()
export class AlertProvider {

  public showingMessage = ""

  constructor(
    private alertController: AlertController
  ) {}

  showAlert(message) {
    // Check this message is showing or not
    if (message === this.showingMessage) {
      return
    }

    this.showingMessage = message
    this.alertController.create({
      title: "APP_NAME",
      message: message,
      buttons: [{
        text: "OK",
        handler: () => {
          this.showingMessage = ""
        }
      }]
    }).present()
  }
}

- Luat Vu Dinh

Answer 3

你可以创建一个 AlertService 来处理更多选项，而不必为按钮注入事件。

import { Injectable } from '@angular/core';
import { AlertController, Alert } from 'ionic-angular';

/**
 * A simple alert class to show only one alert at the same time
 */
@Injectable()
export class AlertService {
  currentAlert: Alert
  constructor(private alertCtrl: AlertController) {
  }

  show(title, message, buttons: any = [], inputs: any = [], cssClass = '') {
    if (!buttons.length) {
      buttons.push('Ok')
    }
    let alertOptions: any = {
      title: title,
      subTitle: message,
      buttons: buttons,
      cssClass: buttons.length === 2 ? 'confirmAlert' : cssClass
    }
    if (inputs.length) {
      alertOptions.inputs = inputs
    }
    if (!this.currentAlert) {
      this.currentAlert = this.alertCtrl.create(alertOptions)
      this.currentAlert.present()
      this.currentAlert.onDidDismiss(() => {
        this.currentAlert = null
      })
    }
    return this.currentAlert
  }
}

问候，尼科尔斯

- jdnichollsc

Answer 4

我的解决方案有效，我不得不放置一个布尔值，并在取消事件后将其设置为true，在呈现警报时将其设置为false

if (this.network_alert) {
      let alert = await this.alertController.create({
        header: "No Network",
        message:
          "Please check your internet connection",
        buttons: [{
          text: "Dismiss",
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
            this.network_alert = true
          }
        }],

      });
      await alert.present();
      this.network_alert = false
    }
  }

- Tendai kastande

---

请在您的答案中插入您的评论，或为您的代码添加上下文，并解释它的作用。请参阅此链接：https://stackoverflow.com/help/how-to-answer 以了解我的意思。 - Orlyyn