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

发布时间：2020-12-17 17:51:29 所属栏目：安全来源：网络整理

导读：我正在使用ionic 2 RC1并使用sublime作为文本编辑器.我需要检查网络连接是否已连接.所以为了这个目的,我正在使用离子原生 Network.但我遇到了Network.onDisconnect()Observable的问题.我已经编辑了initializeApp()方法,其中我检查网络连接并在连接断开时显示

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

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

解决方法

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

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

所以我们的自定义事件(网络：离线和网络：在线)只有在连接真正发生变化时才会触发(当连接状态根本没有改变时,插件触发多个在线或离线事件时修复场景).

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!