如何通知用户有关ionic2中的网络连接状态答案

【问题标题】：how to notify user about the state of network connectivity in ionic2如何通知用户有关ionic2中的网络连接状态
【发布时间】：2017-08-28 11:52:43
【问题描述】：

根据我的应用程序，每当用户与网络断开连接时，我都必须通知用户。所以在提供程序中，我使用了两个函数，一个在在线状态下返回 true，另一个在离线状态下返回 true。在 app.component.ts 中，通过调用提供者的“isOnline()”来检查应用是否处于在线状态。这里提供者代码..

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Network } from '@ionic-native/network';
import { Platform } from 'ionic-angular';
import {Observable} from 'rxjs/Rx';
/*
  Generated class for the Connectivity provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
declare var Connection;
@Injectable()
export class Connectivity {
	onDevice: boolean;
	myObservable :any;
  constructor(public http: Http,public platform: Platform,public network:Network) {
    console.log('Hello Connectivity Provider');
    this.onDevice = this.platform.is('cordova');
    /*
    this.myObservable = Observable.create(observer => {
    	let result = this.isOffline();
    	observer.next(result);
	});
  */
 
  }
isOnline(): boolean {
	
    if(this.onDevice && this.network.type){
      return this.network.type !== Connection.NONE;
    } else {
      return navigator.onLine;
    }
    
    
  }
 
  isOffline(): boolean {
  
    if(this.onDevice && this.network.type){
      return this.network.type === Connection.NONE;
    } else {
      return !navigator.onLine;  
    }
    
  }

}

在app.component.ts的构造函数内部调用isOnline()

constructor(platform: Platform,public connectivityService: Connectivity) {
  
    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.
      StatusBar.styleDefault();
      Splashscreen.hide();
      /*this.connectivityService.myObservable.subscribe((data) => {
        console.log(data);
        
      });*/
     if(this.connectivityService.isOnline()){
      console.log("online");
      
    }
    else {
      console.log("offline");
    }
           
    });

这工作正常，但是，当我与网络断开连接时，我必须再次刷新浏览器，然后才能在控制台上看到“离线”。如何在网络丢失时立即通知用户

【问题讨论】：

看看这里：ionicframework.com/docs/native/network - 至于如何通知用户，这取决于您。也许使用alert？
除了显示简单的 alert 之外，还有其他方式通知用户吗？？
我可以在提供者中使用警报并在多个页面中订阅它吗？任何人都可以参考与此相关的任何链接

标签： ionic2 ionic-native

【解决方案1】：

我收到此错误 this.network.onchange(...).subscribe 不是函数，我使用的是 ionic native 3.6.0。看看网络原生插件，这就是代码的样子。

/**
 * Returns an observable to watch connection changes
 * @return {Observable<any>}
 */
Network.prototype.onchange = function () {
    return Observable.merge(this.onConnect(), this.onDisconnect());
};

在您的代码中执行相同操作可以解决问题

import { Observable } from 'rxjs/Observable';

Observable.merge(this.network.onConnect(), this.network.onDisconnect()).subscribe(() => {
  this.getNetworkInfo();
});

【讨论】：

【解决方案2】：

onchange() 方法无法正常工作..

https://github.com/driftyco/ionic-native/issues/1043

我使用了github论坛的解决方案：

Observable.merge(this.network.onConnect(), this.network.onDisconnect())
.subscribe(e => console.log(e), err => console.error(err));

【讨论】：

【解决方案3】：

查看Ionic Native Network 文档。

尤其是 onChange() 方法：

onchange()
Returns an observable to watch connection changes

Returns: Observable<any>

【讨论】：

我试过了，但遇到错误 ::this.network.onchange(...).subscribe is not a function