如何在Ionic2应用程序中的运行时检测Internet连接

Question

我真的需要您的帮助。我正在尝试检测我的Ionic 2移动应用程序上是否存在Internet连接。我需要在任何时候知道移动设备是否丢失连接以及恢复它的何时，也有WiFi连接。.因此，观测值和网络Cordova插件的WiFi检测，只需执行我需要的工作为了实现这一目标，我在页面构造函数中有两个(用于连接和断开连接(，以设置我在页面逻辑上使用的布尔实例变量。这是我的代码

app.component.ts
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { Geolocation } from '@ionic-native/geolocation';
import { Network } from '@ionic-native/network';
//import { Network } from 'ionic-native';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
 @NgModule({
    declarations: [
      MyApp,
      HomePage
    ],
    imports: [
      IonicModule.forRoot(MyApp)
    ],
    bootstrap: [IonicApp],
    entryComponents: [
       MyApp,
       HomePage    
    ],
    providers: [
      StatusBar,
      SplashScreen,
      {provide: ErrorHandler, useClass: IonicErrorHandler},    
      Geolocation,
      Network
   ]
  })
  export class AppModule {}


home.ts
import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { Network } from '@ionic-native/network';

@Component({
 selector: 'page-home',
 templateUrl: 'home.html'
})
 export class HomePage {
private online:boolean = false;
private wifi:boolean = false;
public disconnectSubscription:any;
public connectSubscription:any;
constructor(private nav: NavController, private geolocation: Geolocation, private network: Network, private platform: Platform) {  
    this.platform.ready().then( () => {
      //listener
      this.connectSubscription = this.network.onConnect().subscribe(() => {
          alert('connected!');
          this.online = true;
          setTimeout(() => {
            // before we determine the connection type.  Might need to wait
            if (this.network.type === 'wifi') {
              this.hayWIFI;
              alert('wifi connection');
            }
          }, 3000);
      });
      //listener
      this.disconnectSubscription = this.network.onDisconnect().subscribe(() => {            
          this.online = false;
          alert('without connection!');
      });
    });
}

}

问题在于，事件是像onchange事件一样触发的。.我只在手动拿出手机的连接或应用程序从睡眠中恢复(丢失连接(时才能看到警报，，但不是当应用程序只是初始化 :(我在主页上甚至在MyApp页面(App.component.ts(上尝试了构造函数的罪犯

我在做什么错？我该如何满足要求？互联网上有许多不同的批准，但看起来较老，即使在网络服务的导入方面也有所不同。我的离子信息是

离子框架：2.3.0
离子应用脚本：1.1.4
角芯：2.4.8
角编译器CLI：2.4.8
节点：6.4.0
操作系统平台：Windows 10
导航器平台：Win32
用户代理：Mozilla/5.0(Windows NT 10.0; WOW64(AppleWebkit/537.36(Khtml，像Gecko一样(Chrome/57.0.2987.133 Safari/537.36

预先感谢

Answer 1

如果要在组件(页面(中收听网络状态，我建议您在页面生命周期事件之一中进行此操作，例如ionViewDidLoad()或ionViewDidEnter()。通常，您要确保您的构造函数处理尽可能小的逻辑，因为它只会发射一次。您可以在此处阅读有关它们的更多信息。

在我的应用程序中，我正在听一个提供商中的网络状态，该提供商是Angular HTTP模块的包装器。为了使它起作用，我必须初始化platform.ready()块内部的所有逻辑，以确保该设备实际上准备好开始被操纵。这是我的提供商的样子：

export class HTTP {
  public online:boolean = true;
  public base:string; // this will be set in the constructor based on if we're in dev or prod
  public token:string = null;
  constructor(public platform:Platform, public http: Http, public events:Events, public cache:CacheService, private network:Network) {
    if(document.URL.includes('https://') || document.URL.includes('http://')){
      this.base = "http://127.0.0.1:3001/";
    } else {
      this.base = "https://url.to_actual_URL.com/";
    }
    this.platform.ready().then(() => {
      let type = this.network.type;
      //console.log("Connection type: ", this.network.type);
      // Try and find out the current online status of the device
      if(type == "unknown" || type == "none" || type == undefined){
        //console.log("The device is not online");
        this.online = false;
      }else{
        //console.log("The device is online!");
        this.online = true;
      }
    });
    this.network.onDisconnect().subscribe( () => {
      this.online = false;
      //console.log('network was disconnected :-(');
    });
    this.network.onConnect().subscribe( () => {
      this.online = true;
      //console.log('network was connected :-)');
    });
  }
}

Answer 2

i通过使用ngcordova解决了类似的问题。它为您的插件周围提供了一个角度包装器，以实现承诺。

使用Promise接口时，Cordova插件通常还没有准备好，您可以避免遇到未定义的错误。

i从此处的网络插件上的NGCordova页面偷走了示例。

module.controller('MyCtrl', function($scope, $rootScope, $cordovaNetwork) {
 document.addEventListener("deviceready", function () {
    var type = $cordovaNetwork.getNetwork()
    var isOnline = $cordovaNetwork.isOnline()
    var isOffline = $cordovaNetwork.isOffline()

    // listen for Online event
    $rootScope.$on('networkOffline', function(event, networkState){
      var onlineState = networkState;
    })
    // listen for Offline event
    $rootScope.$on('networkOffline', function(event, networkState){
      var offlineState = networkState;
    })
  }, false);
});