離子3警報； 調用dismiss（）后，調用present（）無法正常工作

Question

我的Ionic應用程序中具有網絡檢測功能。 目的是在沒有網絡的情況下防止用戶進行交互。

代碼如下在頁面組件中：

ionViewDidEnter() {
this.alert = this.alertCtrl.create({
      title: 'No Network!',
      subTitle: 'Please Connect to Internet to Continue',
      enableBackdropDismiss: false
    });

    if(this.networkCheck.checkNetworkType() === 'none' || this.networkCheck.checkNetworkType() === 'unknown'){
      this.alert.present();
    }
this.networkSubscription = this.networkCheck.onStatusChange().subscribe(
      data => {
          console.debug(data);

          if(data.type === 'offline'){
              this.alert.present();
              this.toast.show(data.type);
          }
          else if(data.type === 'online'){
              this.alert.dismiss();
              this.toast.show(data.type);
          }
      })
}

ionViewWillLeave() {
    this.networkSubscription.unsubscribe();
  }

並在提供者中：

onStatusChange(){
    return this.network.onchange()
  }

問題在於，當Toast顯示所有狀態更改時，警報彈出窗口僅在網絡斷開時才第一次顯示。 第一次關閉后，它不再顯示。

您能幫我這個忙嗎？我猜想viewDismiss是導致這種情況發生的原因，但是我無法控制住它。

同時請讓我知道是否有更好的方法來處理此行為。

Answer 1

您可以嘗試此解決方案。

alert:any;
showAlert(){
  this.alert = this.alertCtrl.create({
    title: 'No Network!',
    subTitle: 'Please Connect to Internet to Continue',
    enableBackdropDismiss: false
  });
  this.alert.present();
}
ionViewDidEnter() {


  if (this.networkCheck.checkNetworkType() === 'none' || this.networkCheck.checkNetworkType() === 'unknown') {
    this.showAlert();
  }
  this.networkSubscription = this.networkCheck.onStatusChange().subscribe(
    data => {
      console.debug(data);

      if (data.type === 'offline') {
        this.showAlert();
        this.toast.show(data.type);
      }
      else if (data.type === 'online') {
        this.alert && this.alert.dismiss();
        this.toast.show(data.type);
      }
    })
}

ionViewWillLeave() {
  this.networkSubscription.unsubscribe();
}

Answer 2

您可以在app.component.ts文件中編寫代碼，以便它適用於所有頁面。

import { Component, ViewChild } from '@angular/core';
import { Platform, Nav, Alert, AlertController } from 'ionic-angular';
import { Network } from '@ionic-native/network';
import { Subscription } from 'rxjs';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  networkWarningAlert: Alert = null;
  disconnectSubscription: Subscription = null;
  connectSubscription: Subscription = null;

  constructor(public platform: Platform,
    public alert: AlertController,
    private network: Network) {
    platform.ready().then(() => {
         this.SubscribeNetworkAction();
    });
  }

  isConnected(): boolean {
    let conntype = this.network.type;
    return conntype && conntype !== 'unknown' && conntype !== 'none';
  }

  SubscribeNetworkAction() {

    if (!this.platform.is("cordova"))
      return;

    if (!this.isConnected() && !this.networkWarningAlert) {
      this.networkWarningAlert = this.alert.create({
        title: 'No network',
        message: 'Check your internet connection',
        enableBackdropDismiss: false,
        buttons: [{
          text: "Exit",
          handler: () => { this.platform.exitApp(); }
        }]
      })
      this.networkWarningAlert.present();
    }

    this.disconnectSubscription = this.network.onDisconnect().subscribe(() => {
      if (!this.networkWarningAlert) {
        this.networkWarningAlert = this.alert.create({
          title: 'No network',
          message: 'Check your internet connection',
          enableBackdropDismiss: false,
          buttons: [{
            text: "Exit",
            handler: () => { this.platform.exitApp(); }
          }]
        })
        this.networkWarningAlert.present();
      }
    });

    this.connectSubscription = this.network.onConnect().subscribe(() => {
      if (this.networkWarningAlert) {
        this.networkWarningAlert.dismiss();
        this.networkWarningAlert = null;
      }
      // this code is used for refresh current page.
      var currentStack = this.nav.getViews();
      this.nav.setRoot(currentStack[0].component);
      for (var i = 1; i < currentStack.length; i++) {
        this.nav.push(currentStack[i].component, currentStack[i].getNavParams());
      }
    });
  }

  UnSubscribeNetworkAction() {
    if (!this.platform.is("cordova"))
      return;

    if (this.disconnectSubscription) {
      this.disconnectSubscription.unsubscribe();
      this.disconnectSubscription = null;
    }
    if (this.connectSubscription) {
      this.connectSubscription.unsubscribe();
      this.connectSubscription = null;
    }
  }
}