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

问题描述

我正在使用离子2 RC1并使用sublime作为文本编辑器。我需要检查网络连接是否已连接。所以为了这个目的，我正在使用离子原生网络。但是我遇到了 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();
    });
  }

我面临的问题是，如果应用程序断开连接，警报会显示两次互联网。我在帖子中发现了类似的问题但没有答案。任何有关这方面的帮助将不胜感激。
提前致谢！

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

所以我们的自定义事件（网络：离线和网络：在线）只有在连接真正发生变化时才会被触发（修复多个在线或离线事件被触发时的情况）当连接状态完全没有改变时插件。

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屋！