取消旧警报并显示最新警报-Ionic3

Question

我正在使用Ionic 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();
});

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

必需的行为：如果用户多次断开连接并重新连接，则对于网络变化的每个实例，都应显示一个警报，而较旧的警报将自动被关闭，以便在任何给定的时间点，都不会向用户显示多个警报视图上任何警报的实例。

Answer 1

isAvailable: Boolean; //boolean variable helps to find which alert we should dissmiss   
connectedToInternet; //made global to get access 
noInternetAlert; // made global to get access


 this.connectSubscription = this.network.onConnect().subscribe(() => {
      console.log('network connected!');

      if(!this.isAvailable){ //checking if it is false then dismiss() the no internet alert
        this.noInternetAlert.dismiss();
      }
       this.isAvailable =true;

      this.connectedToInternet = this.alertController.create({
        subTitle: 'Connected to Internet',
        buttons: ['OK']
      });
      this.connectedToInternet.present();
    });

    this.disconnectSubscription = this.network.onDisconnect().subscribe(() => {

     if(this.isAvailable){// if it is true then dismiss the connected to internet alert
        this.connectedToInternet.dismiss();
      }
      this.isAvailable = false;
      this.noInternetAlert = this.alertController.create({
        subTitle: 'No Internet Connection. Please enable Wifi or Mobile data to continue.',
        buttons: ['OK']
      });
      this.noInternetAlert.present();
    });

Answer 2

标记为正确的答案可以解决问题中提出的问题，但是，或者，还有一个更精致的解决方案，其中涵盖了警报堆叠的多种情况，我已经成功实现了。 我使用提供程序为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可能会混乱。 请查看该问题的答案： https : //stackoverflow.com/a/39188966/4520756

请注意，要使此解决方案起作用，只需使用此包装器即可创建所有警报。 它不支持使用Ionic提供的默认AlertController创建的警报。 希望这对希望避免警报堆积的人有所帮助！

有关覆盖较少情况的替代且更简单的解决方案，请查看以下答案： https : //stackoverflow.com/a/39940803/4520756

学分： https ： //stackoverflow.com/a/43318081/4520756

Answer 3

我已经做到了，如下所示。代码是不言自明的。如果您需要任何解释，请告诉我。

我创建了一个如下所示的povider 。

网络状态

import { Injectable } from '@angular/core';
import { Network } from '@ionic-native/network';
import { ToastController } from "ionic-angular";
import { Subscription } from "rxjs/Subscription";

@Injectable()
export class NetworkStateProvider {

  public isInternetAvailable = true; private connectSubscription$: Subscription = null;

  constructor(private network: Network, private toastCtrl: ToastController) {
  }

  //Watch for internet connection
  public WatchConnection() {
    if (this.connectSubscription$) this.connectSubscription$.unsubscribe();
    this.connectSubscription$ = this.network.onDisconnect().subscribe(() => {
      this.isInternetAvailable = false;
      this.showToast('Internet connection unavailable');
      console.log(this.network.type, this.isInternetAvailable, 'No internet!');
      if (this.connectSubscription$) this.connectSubscription$.unsubscribe();
      this.connectSubscription$ = this.network.onConnect().subscribe(() => {
        console.log('Network connected!');
        setTimeout(() => {
          if (this.network.type === 'wifi' || this.network.type === '4g' || this.network.type === '3g' || this.network.type === '2g' || this.network.type === 'cellular' || this.network.type === 'none') {
            this.isInternetAvailable = true;
            this.showToast('Internet connection available');
            this.WatchConnection();
            console.log(this.network.type, this.isInternetAvailable, 'we got a connection!');
          }
        }, 3000);
      });
    });
  }

  //show Toast
  showToast(message, timeout = 3000) {
    let toast = this.toastCtrl.create({
      message: message,
      duration: timeout,
      position: 'bottom',
    });
    toast.present()
  }

  //check Internet Availability
  checkInternetAvailability(): boolean {
    if (!this.isInternetAvailable) {
      this.showToast('Internet connection unavailable');
       return false;
    } else if (!this.isInternetAvailable) {
      this.showToast('Internet connection unavailable');
      return false;
    } else {
      return true;
    }
  }
}

我在这里使用了该provider ：

app.component.ts

constructor(private network: NetworkStateProvider,public platform: Platform){
 platform.ready().then(() => {
       this.network.WatchConnection();
    });
}