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