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

Question

我正在使用 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 中发现了类似的问题，但没有得到答复。在这方面的任何帮助将不胜感激。 提前致谢！

Answer 1

this.network.onDisconnect().subscribe(() => {
    if(this.status == true){
      console.log("no need to call again")
      alert("no need to call again")
    }
    else{
      this.status = true;
      console.log(this.status)
      console.log('network was disconnected :-(');
      // alert('network was disconnected :-(');
      // this.prompt.ShowAlert('Connection Problem','Please check your internet connection and try again.')

      let modal = this.modalCtrl.create('NoInternetPage');
      modal.present();

      modal.onDidDismiss((info) => {
        console.log("on modal dismiss")
      });
    }



  });

  this.network.onConnect().subscribe(() => {
    this.status = false;
  })

你可以试试这个简单的技巧

Answer 2

您真正的问题是，您没有在实际类中使用绑定构造函数！如果您想在 app.component.ts 中调用它，那么只需将参数添加到您的

constructor(public network: Network)

并且直接在网络之外使用！所以叫：this.network.... 那么最好的方法是使用静态变量来控制它：

static checkedState: boolean = false;

在您编写完 OnConnect 语句后，将 checkedState 设置为 true 并使用 if 语句同时在 OnDisconnect 和 OnConnect 上捕获它，您应该只收到一次消息。顺便说一句：我在 eventsCtrl 中也有这种行为，我不知道 Ionic 是否可以更好地使用其他控制机制来处理这些事情。

问候 钢筋

Answer 3

我认为你应该使用下面的代码来避免这个问题。

import { Network } from 'ionic-native';

    @Injectable()
    export class NetworkService {
    previousStatus:any
        constructor() {

        }       

    showAlert(title, msg) {
        let alert = this.alertCtrl.create({
          title: title,
          subTitle: msg,
          buttons: ['OK']
        });
        alert.present();
      }        
          this.initializeApp();
          this.network.onDisconnect().subscribe( () => {
                if (this.previousStatus === Online) {
                    this.showAlert("Error", "No internet connection");
                }
                this.previousStatus = Offline;
            });
            Network.onConnect().subscribe(() => {
                if (this.previousStatus === Offline) {
                 this.showAlert("Alert", "Network was connected");
                }
                this.previousStatus = Online;
            });
        }
    }

Answer 4

我已经解决了这个问题。人们遇到的真正问题是，在很多情况下会创建多个 Ionic 页面实例。所以如果你在一个页面上注册了一个事件接收器，然后开始在 App 中来回导航，这个事件接收器会被注册多次。 解决方案是在 app.component.ts 的 intializeApp 方法中添加事件接收器，如下所示：

// top of page 
import { Observable } from 'rxjs/Observable';

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.
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      var offline = Observable.fromEvent(window, "offline");
      var online = Observable.fromEvent(window, "online");

      offline.subscribe(() => {          
          console.log('Offline event was detected.');
      });

      online.subscribe(() => {
          console.log('Online event was detected.');        
      })
    });
  }

无论您在 App 中导航多少次，这两条日志消息都只会在您分别在线/离线时触发一次。

Answer 5

为了避免这种情况，您可以过滤事件，并在状态从在线变为离线或从离线变为在线时执行某些操作（而不是每次触发事件时）由插件）。所以基本上你可以像这样创建一个服务来处理所有这些逻辑：

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