IONIC 2本机Network.onDisconnect()运行代码两次

Question

我正在使用ionic 2 RC1并使用sublime作为文本编辑器.我需要检查网络连接是否已连接.所以为了这个目的,我正在使用离子原生网络.但我面临着Network.onDisconnect()Observable的问题.我编辑了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

为了避免这种情况,您可以过滤事件,并在状态从在线更改为脱机或从离线更改为在线时执行某些操作(而不是每次插件触发事件时).所以基本上你可以创建一个服务来处理所有这样的逻辑:

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', () => {
  // ...            
});