离子2本地网络.ondisconnect()运行代码两次

Question

我正在使用离子2 rc1，并使用sublime作为文本编辑器。我需要检查网络连接是否连接。因此，为此，我将离子本机网络用于此目的。但是我面临Network.onDisconnect()可观察的问题。我已经编辑了initializeApp()方法，其中我检查了网络连接并显示警报是否断开连接。我有以下代码在app.component.ts

中编写的代码

  showAlert(title, msg) {
    let alert = this.alertCtrl.create({
      title: title,
      subTitle: msg,
      buttons: ['OK']
    });
    alert.present();
  }
  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      let disconnectSubscription = Network.onDisconnect().subscribe(() => {
        this.showAlert("Error", "No internet connection");
      });
      StatusBar.styleDefault();
    });
  }

我面临的问题是，如果应用程序与Internet断开连接，则显示了两次警报。我在这篇文章中发现了类似的问题，但没有得到答复。在这方面的任何帮助将不胜感激。预先感谢！

Answer 1

为了避免这种情况，您可以过滤事件，并且在状态从在线变为离线或从离线到在线时只需做某事（and）并非每次活动都会被插件触发）。因此，基本上，您可以创建一个服务来处理所有这些逻辑：

import { Injectable } from '@angular/core';
import { Network } from 'ionic-native';
import { Events } from 'ionic-angular';
export enum ConnectionStatusEnum {
    Online,
    Offline
}
@Injectable()
export class NetworkService {
    private previousStatus;
    constructor(private eventCtrl: Events) {
        this.previousStatus = ConnectionStatusEnum.Online;
    }
    public initializeNetworkEvents(): void {
        Network.onDisconnect().subscribe(() => {
            if (this.previousStatus === ConnectionStatusEnum.Online) {
                this.eventCtrl.publish('network:offline');
            }
            this.previousStatus = ConnectionStatusEnum.Offline;
        });
        Network.onConnect().subscribe(() => {
            if (this.previousStatus === ConnectionStatusEnum.Offline) {
                this.eventCtrl.publish('network:online');
            }
            this.previousStatus = ConnectionStatusEnum.Online;
        });
    }
}

因此，只有在连接真正更改时，我们的自定义事件（network:offline和network:online）才会触发（当连接状态根本没有更改时，插件触发了多个在线或离线事件时，请否定场景）。

然后，在您的app.component文件中，您只需要订阅我们的自定义事件：

// Offline event
this.eventCtrl.subscribe('network:offline', () => {
  // ...            
});
// Online event
this.eventCtrl.subscribe('network:online', () => {
  // ...            
});

Answer 2

我认为您应该使用以下代码来避免该问题。

import { Network } from 'ionic-native';
    @Injectable()
    export class NetworkService {
    previousStatus:any
        constructor() {
        }       
    showAlert(title, msg) {
        let alert = this.alertCtrl.create({
          title: title,
          subTitle: msg,
          buttons: ['OK']
        });
        alert.present();
      }        
          this.initializeApp();
          this.network.onDisconnect().subscribe( () => {
                if (this.previousStatus === Online) {
                    this.showAlert("Error", "No internet connection");
                }
                this.previousStatus = Offline;
            });
            Network.onConnect().subscribe(() => {
                if (this.previousStatus === Offline) {
                 this.showAlert("Alert", "Network was connected");
                }
                this.previousStatus = Online;
            });
        }
    }

Answer 3

我解决了这个问题。人们遇到的真正问题是，在许多情况下，创建了多个离子页面的实例。因此，如果您在页面上注册事件接收器，然后开始通过应用程序来回导航，则事件接收器将被多次注册。解决方案是在 app.component.ts 的IntializeApp方法中添加事件接收器，例如：

// top of page 
import { Observable } from 'rxjs/Observable';
initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      var offline = Observable.fromEvent(window, "offline");
      var online = Observable.fromEvent(window, "online");
      offline.subscribe(() => {          
          console.log('Offline event was detected.');
      });
      online.subscribe(() => {
          console.log('Online event was detected.');        
      })
    });
  }

无论您在应用程序中导航多少。

您的真正问题是，您在实际班级中不使用贝的构造函数！如果您想在app.component.ts中调用它，只需将参数添加到您的

constructor(public network: Network)

和使用直接是网络！所以请致电：this.network ....那么最好的是用静态变量控制它：

static checkedState: boolean = false;

您编写了OnConnect语句后，将CheckEdstate设置为True，并在同时使用IF语句抓住它：OnDisconnect和OnConnect，您只能收到一次消息。顺便说一句：我也有EventsCtrl的行为，我不知道Ionic是否通过其他围场机制更好地处理这些事情。

问候rebar

this.network.onDisconnect().subscribe(() => {
    if(this.status == true){
      console.log("no need to call again")
      alert("no need to call again")
    }
    else{
      this.status = true;
      console.log(this.status)
      console.log('network was disconnected :-(');
      // alert('network was disconnected :-(');
      // this.prompt.ShowAlert('Connection Problem','Please check your internet connection and try again.')
      let modal = this.modalCtrl.create('NoInternetPage');
      modal.present();
      modal.onDidDismiss((info) => {
        console.log("on modal dismiss")
      });
    }

  });
  this.network.onConnect().subscribe(() => {
    this.status = false;
  })

您可以尝试这个简单的技巧