Question

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

但我的问题是：有一种方法可以在网络状态发生变化时“自动”显示对话框（不使用Observable.period（））？

谢谢！

Answer 1

在Network Information plugin的文档中，您可以看到该插件会发出2个事件：＆＃34;离线＆＃34;如果设备脱机并且＆＃34;在线＆＃34;如果设备上线这两个事件我们可以用来制作Observables。在这个HomePage中，我制作了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方式。但离线，在线的事件都在窗口对象中，而不在文档中。

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中的更改

4 个答案: