angular - 解除旧警报并显示最新警报 - 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();
});

当前行为:如果用户多次断开连接并重新连接，对于网络中的每个更改实例，都会显示一个警报，并且警报会堆叠在 View 上，直到用户手动关闭警报.

要求的行为:如果用户多次断开连接并重新连接，对于网络中的每个变化实例，都应显示警报，同时自动解除旧警报，以便在任何给定时间点，用户不会在 View 上看到任何警报的多个实例。

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