Ionic：检查设备是否有网络连接

Question

当设备连接到互联网时，我希望执行特定的功能。

我尝试了以下代码：

checkConnection(API){
  this.network.onConnect().subscribe(() => {
    this.changeAPI(API);
  });
  this.network.onDisconnect().subscribe(() =>{
    let loading = this.loadingCtrl.create({
      content: 'No Connection'
    });

    loading.present();

    setTimeout(() => {
      loading.dismiss();
    }, 1500);
  });
}

但是它不起作用，那么我该如何检查连接？

- OnlyYannick

---

尽管我已经建立了连接，但它并没有执行该函数。 - OnlyYannick

你想看什么？ - OnlyYannick

changeAPI 方法 - Sachila Ranawaka

更改API方法有效，你知道其他检查连接的方法吗？ - OnlyYannick

https://medium.com/@balramchavan/detecting-internet-connection-status-in-angular-application-ng-connection-service-1fa8add3b975 - Sachila Ranawaka

Answer 1

我建议在这个特定的功能中使用可观察对象。此外，实现一个服务将允许您在整个应用程序中检查连接。

//.ts

import { Injectable } from '@angular/core';
import { Network } from '@ionic-native/network';
import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
 
Injectable()
export class DataService {
      connected: Subscription;
      disconnected: Subscription;
      public networkType:any;
      public online:any;
      constructor(  public network: Network){

          //May have to unsubscribe from Observable
        this.checkConnection = Observable.interval(250 * 60).subscribe(x => {
      //Check for connection every 15 seconds
          this.connected;
          this.disconnected;
          this.networkType = this.network.type;
          this.connected = this.network.onConnect().subscribe(data =>{
               this.online = data.type;
             }, error => console.error(error));

          this.network.onDisconnect().subscribe(data =>{
                this.online = data.type;
             },);
            }, error => console.error(error));
          }
        removeConnections(){
      this.checkConnection.unsubscribe();
      }
    }

在另一页中显示

import { Component } from '@angular/core';
import { IonicPage,NavParams} from 'ionic-angular';
import { DataService } from '../../services/dataservice';//service

@IonicPage()
@Component({
  selector: 'page-support',
  templateUrl: 'support.html',
})
export class SupportPage {
    constructor(private service: DataService){
    }
   }

//.html
<ion-header>
  <ion-navbar>
    <ion-title>Support</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>
  <ion-grid>
     <ion-row>
        <ion-col>
          <h1>Connection: {{this.reap.networkType}}</h1>
        </ion-col>
      </ion-row>
  </ion-grid>
</ion-content>

可观测对象将不断检查您的连接，直到您取消订阅为止。因此，它在HTML代码中也会发生变化。

- Stephen Romero