IONIC 2 本机 Network.onDisconnect() 运行代码两次 [英] IONIC 2 native Network.onDisconnect() running code twice

问题描述

我正在使用 ionic 2 RC1 并使用 sublime 作为文本编辑器.我需要检查网络连接是否已连接.为此，我为此使用了 ionic native Network.但我面临 Network.onDisconnect() Observable 的问题.我编辑了 initializeApp() 方法，在该方法中我检查网络连接并在连接断开时显示警报.我在 app.component.ts

i am working with ionic 2 RC1 and using sublime as text editor. i need to check if the network connection is connected or not. so for this purpose i am using ionic native Network for this purpose. but i am facing problem with the Network.onDisconnect() Observable. I have edited initializeApp() method in which i check for network connection and show alert if connection got disconnected. the I have the following code written in 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();
    });
  }

我面临的问题是，如果应用程序与互联网断开连接，警报会显示两次.我在这个 post 但没有得到答复.在这方面的任何帮助将不胜感激.提前致谢！

The problem i am facing is that alert is shown twice if application get disconnected from internet. I have found similar issue in this post but it got unanswered. Any help on this regard will be much appreciated. Thanks in advance !

推荐答案

为了避免这种情况，您可以过滤事件，并在状态从在线变为离线时做一些事情，或者从离线到在线(而不是每次插件触发事件时).所以基本上你可以创建一个服务来处理所有这些逻辑，如下所示:

In order to avoid that, you can filter the events, and just do something when the state changes from online to offline, or from offline to online (and not every time the event is being fired by the plugin). So basically you can create a service to handle all this logic like this:

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)只会在连接真正改变时触发(修复多个在线或离线事件发生时的场景)当连接状态根本没有改变时由插件触发).

So our custom events (network:offline and network:online) will only be fired when the connection truly changes (fixing the scenario when multiple online or offline events are fired by the plugin when the connection state hasn't changed at all).

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

Then, in your app.component file you just need to subscribe to our custom events:

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

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

这篇关于IONIC 2 本机 Network.onDisconnect() 运行代码两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！