离子 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

您可以在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;
    }
  }
}

Answer 2

你可以试试这个解决方案。

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