验证互联网连接的变化 ionic2

Question

我看到这个教程来确定 ionic2 中的网络可用性： https://www.thepolyglotdeveloper.com/2016/01/determine-network-availability-in-an-ionic-2-mobile-app/

但我的问题是：有一种方法可以在网络状态改变时显示对话框 "automatically"（不使用 Observable.period()）？

谢谢！

Answer 1

在 Network Information plugin 的文档中，您可以看到插件发出 2 个事件："offline" 如果设备离线，"online" 如果设备在线。我们可以使用这两个事件来制作 Observables。在此主页中，我制作了 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

我喜欢 Angular2 中的 Observable 方式。但是离线事件，在线事件在 window 对象中而不在文档中。

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

验证互联网连接的变化 ionic2

Verify changes in internet connection ionic2

cordova-plugins

ionic2

angular