は、私がionic2でネットワークの可用性を決定するために、このチュートリアルを参照してください

Question

ionic2インターネット接続の変更を確認します。 https://www.thepolyglotdeveloper.com/2016/01/determine-network-availability-in-an-ionic-2-mobile-app/

をしかし、私の質問は：ダイアログを表示する方法は、「自動」があります時に観察可能な使用せずにネットワークの状態変化（ 。期間（））？

ありがとうございます！

Answer 1

Network Information pluginのドキュメントでは、プラグインが2つのイベントを送信していることがわかります。デバイスがオフラインになった場合は「オフライン」、オンラインになる場合は「オンライン」です。 Observablesの作成に使用できるこの2つのイベント。このホームページでは、私は2つのオブザーバブルを作成し、サブスクライブではアラートを表示する関数を作成します。まず、rxjsからObservableが必要で、fromEventメソッドもインポートする必要があります。

import {Page, Alert, NavController} from 'ionic-angular'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/observable/fromEvent'; 

@Page({ 
    templateUrl: 'build/pages/home/home.html' 
}) 
export class HomePage { 

constructor(public nav:NavController) { 
    var offline = Observable.fromEvent(document, "offline"); 
    var online = Observable.fromEvent(document, "online"); 

    offline.subscribe(() => { 
     let alert = Alert.create({ 
      title: "Connection", 
      message: "You are offline!" 
     }); 
     nav.present(alert); 
    }); 

    online.subscribe(()=>{ 
     let alert = Alert.create({ 
      title: "Connection", 
      message: "You are online!" 
     }); 
     nav.present(alert); 
    }); 
    } 
} 

Answer 2

私の代わりにイベント（https://ionicframework.com/docs/v2/api/util/Events/）のために行くことにしました：

constructor(private events: Events, private alertCtrl: AlertController) { 
    this.platform.ready().then(() => { 
     this.watchForNetworkChanges(); 
}); 

watchForNetworkChanges() { 
    // Watch network for a connection 
    Network.onConnect().subscribe(() => { 
    this.events.publish('network:connected', true);  
    }); 

    Network.onDisconnect().subscribe(() => { 
    this.events.publish('network:connected', false); 
}); 

そして、私はネットワークの状態変化に対処するために、これらのイベントをサブスクライブし、他の場所で：

this.events.subscribe('network:connected', (status) => { 
    let connected = status[0] === true; 

    if (!connected) { 
    let alert = this.alertCtrl.create({ 
     title: 'No Internet', 
     message: "You are offline!" 
     buttons: ['OK'] 
    }); 

    alert.present(); 
    } 

    this.isConnected = connected; 
} 

Answer 3

I Angular2のObservableな方法のように。しかし、オフラインのイベントは、オンラインではなく、ドキュメント内のウィンドウオブジェクトです。 window.addEventListener（ 'オンライン'、機能の（e：

Online_and_offline_events

は今、私が使用しているため、

console.log(navigator.onLine); 

let offline = Observable.fromEvent(window, 'offline'); 
let online = Observable.fromEvent(window, 'online'); 

    offline.subscribe(() => { 
     console.log(navigator.onLine); 
    }); 

    online.subscribe(() => { 
     console.log(navigator.onLine); 
    }); 

Answer 4

checkNetwork() { 
    this.platform.ready().then(() => { 
     var networkState = navigator.connection.type; 
     var states = {}; 
     states[Connection.UNKNOWN] = 'Unknown connection'; 
     states[Connection.ETHERNET] = 'Ethernet connection'; 
     states[Connection.WIFI]  = 'WiFi connection'; 
     states[Connection.CELL_2G] = 'Cell 2G connection'; 
     states[Connection.CELL_3G] = 'Cell 3G connection'; 
     states[Connection.CELL_4G] = 'Cell 4G connection'; 
     states[Connection.CELL]  = 'Cell generic connection'; 
     states[Connection.NONE]  = 'No network connection'; 
     let alert = this.alertCtrl.create({ 
      title: "Connection Status", 
      subTitle: states[networkState], 
      buttons: ["OK"] 
     }); 
     alert.present(); 
    }); 
}