ION 2 네이티브 Network.onDisconnect()를 두 번 실행 코드

Question

나는 ionic 2 RC1로 작업 중이며 텍스트 편집기로 승화를 사용하고 있습니다. 네트워크 연결이 연결되어 있는지 확인해야합니다. 그래서이 목적을 위해 나는이 목적을 위해 이온 성 네이티브 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

나는이 문제를 해결했다. 사람들이 가지고있는 진짜 문제는 많은 경우에 이온 페이지의 여러 인스턴스가 생성된다는 것입니다. 따라서 페이지에 이벤트 수신기를 등록한 다음 앱을 통해 앞뒤로 탐색을 시작하면 이벤트 수신기가 여러 번 등록됩니다.

// 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.component.ts의 intializeApp 방법과 같이에서 이벤트 수신기를 추가하는 것입니다 앱 내에서 많이 이동합니다.

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