IONIC 2 native Network.onDisconnect（）运行代码两次

Question

我正在使用ionic 2 RC1并使用sublime作为文本编辑器。我需要检查网络连接是否连接。所以为此我使用离子原生Network来达到这个目的。但我面临的问题与可观察的Network.onDisconnect()。我已编辑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',() => { 
    // ...    
}); 

Answer 2

我已经解决了这个问题。人们遇到的真正问题是，在很多情况下，会创建多个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 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; 
      }); 
     } 
    }