Angular 解除旧警报并显示最新警报-Ionic3

我使用的是爱奥尼亚3的警报，我面临警报堆积的问题。 我正在使用网络插件检查用户是否连接到网络（WiFi/2G/3G等），其想法是在用户每次离线或在线时触发警报

this.connectSubscription = this.network.onConnect().subscribe(() => {
  console.log('network connected!');
  let connectedToInternet = this.alertController.create({
    subTitle: 'Connected to Internet',
    buttons: ['OK']
  });
  connectedToInternet.present();
});

this.disconnectSubscription = this.network.onDisconnect().subscribe(() => {
  let noInternetAlert = this.alertController.create({
    subTitle: 'No Internet Connection. Please enable Wifi or Mobile data to continue.',
    buttons: ['OK']
  });
  noInternetAlert.present();
});

当前行为：如果用户多次断开和重新连接，对于网络中的每一个更改实例，都会显示一个警报，警报会堆积在视图上，直到用户手动解除警报

---

所需行为：如果用户多次断开和重新连接，对于网络中的每一个变化实例，应显示一个警报，而旧警报将自动解除，以便在任何给定时间点，用户在视图中不会看到任何警报的多个实例。

我已按如下所示完成此操作。代码是自解释的。如果您需要任何解释，请告诉我

我已经创建了一个

povider

，如下所示

网络状态

我在这里使用了

提供者

：

app.component.ts

---

我已经这样做了，如下所示。代码是自解释的。如果你需要任何解释，请让我知道

我已经创建了一个

povider

，如下所示

网络状态

我在这里使用了

提供者

：

app.component.ts

---

标有“正确”的答案解决了问题中提出的问题，但另外，还有一个更详细的解决方案，它将涵盖多个警报堆积的情况，我已经成功地实现了这一解决方案。我使用一个提供程序为AlertController创建了一个包装器，该提供程序将维护每个警报的状态，然后关闭旧警报并显示新警报。下面的代码是针对提供者的，它基本上是我在应用程序中创建的所有警报所使用的包装类：

import {AlertController} from 'ionic-angular';
@Injectable()
export class AlertserviceProvider {
  alerts: any[] = [];

  constructor(public alertController: AlertController) {
  }

  newAlert(title, subTitle){
    let alert = this.alertController.create({
      title:title,
      subTitle:subTitle
    });
    this.alerts.push(alert);
    return alert;
  }

  dismissAlert(){
    if(this.alerts.length){
      this.alerts.forEach(element => {
        element.dismiss();
      });
    }
    this.alerts = [];
  }

}

这可以使用以下代码在页面中使用：

import { AlertserviceProvider } from '../../providers/alertservice/alertservice';
...
...
...

constructor(..,public alertHandler: AlertserviceProvider,..) {
...
}
testMethod(){
    //First we dismiss the previous alerts if any
    this.alertHandler.dismissAlert();
    //Creating the new alert
    var testAlert = this.alertHandler.newAlert('Title','SubTitle');
    //Adding buttons to the new alert
    testAlert.addButton({
        text: 'OK',
        role: 'OK',
        handler: () => {
          //Handler actions go here - include the Handler only if required
        }
      });
    testAlert.present();
}

不要忘记导入提供者并在构造函数参数中为其创建变量

如果您想添加多个按钮，CSS可能会出错。请看看这个问题的答案：

请注意，要使此解决方案正常工作，您的所有警报只需使用此包装器创建。它不支持使用爱奥尼亚提供的默认AlertController创建的警报。希望这能帮助任何希望避免警报堆积的人

对于覆盖较少情况的替代和更简单的解决方案，请查看以下答案：

---

信用证：

标记为“正确”的答案解决了问题中提出的问题，但另外，还有一个更详细的解决方案，将涵盖多个警报堆积的情况，我已成功实施了该解决方案。我使用一个提供程序为AlertController创建了一个包装器，该提供程序将维护每个警报的状态，然后关闭旧警报并显示新警报。下面的代码是针对提供者的，它基本上是我在应用程序中创建的所有警报所使用的包装类：

import {AlertController} from 'ionic-angular';
@Injectable()
export class AlertserviceProvider {
  alerts: any[] = [];

  constructor(public alertController: AlertController) {
  }

  newAlert(title, subTitle){
    let alert = this.alertController.create({
      title:title,
      subTitle:subTitle
    });
    this.alerts.push(alert);
    return alert;
  }

  dismissAlert(){
    if(this.alerts.length){
      this.alerts.forEach(element => {
        element.dismiss();
      });
    }
    this.alerts = [];
  }

}

这可以使用以下代码在页面中使用：

import { AlertserviceProvider } from '../../providers/alertservice/alertservice';
...
...
...

constructor(..,public alertHandler: AlertserviceProvider,..) {
...
}
testMethod(){
    //First we dismiss the previous alerts if any
    this.alertHandler.dismissAlert();
    //Creating the new alert
    var testAlert = this.alertHandler.newAlert('Title','SubTitle');
    //Adding buttons to the new alert
    testAlert.addButton({
        text: 'OK',
        role: 'OK',
        handler: () => {
          //Handler actions go here - include the Handler only if required
        }
      });
    testAlert.present();
}

不要忘记导入提供者并在构造函数参数中为其创建变量

如果您想添加多个按钮，CSS可能会出错。请看看这个问题的答案：

请注意，要使此解决方案正常工作，您的所有警报只需使用此包装器创建。它不支持使用爱奥尼亚提供的默认AlertController创建的警报。希望这能帮助任何希望避免警报堆积的人

对于覆盖较少情况的替代和更简单的解决方案，请查看以下答案：

---

信用证：

谢谢您的代码Sampath。您的想法很好，但我正在尝试显示警报，而不是toast消息，我不想在超时时将其忽略。感谢您提供这段代码。它帮助我解决了另一个问题！很高兴听到这个消息。干杯：）谢谢你的密码。您的想法很好，但我正在尝试显示警报，而不是toast消息，我不想在超时时将其忽略。感谢您提供这段代码。它帮助我解决了另一个问题！很高兴听到这个消息。干杯：）

import { AlertserviceProvider } from '../../providers/alertservice/alertservice';
...
...
...

constructor(..,public alertHandler: AlertserviceProvider,..) {
...
}
testMethod(){
    //First we dismiss the previous alerts if any
    this.alertHandler.dismissAlert();
    //Creating the new alert
    var testAlert = this.alertHandler.newAlert('Title','SubTitle');
    //Adding buttons to the new alert
    testAlert.addButton({
        text: 'OK',
        role: 'OK',
        handler: () => {
          //Handler actions go here - include the Handler only if required
        }
      });
    testAlert.present();
}