如何在ionic2

Question

  

根据我的应用程序，我必须在他从网络断开连接时通知用户。所以在提供者中我使用了两个函数，一个在联机状态返回true而另一个在离线状态返回true。在app.component.ts中，通过调用＆＃34; isOnline（）＆＃34;来检查app是否处于在线状态。提供者代码。提供者代码..

＆＃13;

＆＃13;

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

}

＆＃13;

＆＃13;

＆＃13;

  在app.component.ts的构造函数内部调用isOnline（）

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

  

这工作正常但是，当我从网络断开连接时，我必须再次刷新浏览器，然后才能看到＆＃34;离线＆＃34;在console.how上，一旦网络丢失就通知用户

Answer 1

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

Answer 2

查看Ionic Native Network文档。

特别是onChange（）方法：

onchange()
Returns an observable to watch connection changes

Returns: Observable<any>

Answer 3

我收到此错误this.network.onchange（...）。subscribe不是函数，我使用的是离子本机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();
});