angular - IONIC 2 native Network.onDisconnect() 运行代码两次

Question

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

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

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