原生离子网络状态对我的代码不起作用 [英] native ionic network status doesn't work on my code

问题描述

我想在所有页面上没有连接和/或连接时显示警告消息，但它不起作用。显示网络类型有效，但不显示任何警告消息。

I wanted to show alert message when no connection and or connected on all pages, but it's not working. Show network type works, but no alert message show up.

目标是在APP连接和断开连接时显示消息。我正在关注 https://ionicframework.com/docs/native/network/

The goal is to show message when APP connected and disconnected. I'm following https://ionicframework.com/docs/native/network/

这是我的代码 app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, AlertController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TranslateService } from '@ngx-translate/core';

import { Storage } from '@ionic/storage';
import { Network } from '@ionic-native/network';

import { ClientsListPage } from '../pages/clients/list';
import { JobsListPage } from '../pages/jobs/list';
import { SplashPage } from '../pages/splash/splash';
import { StatusPage } from '../pages/status/status';
import { LoginPage } from '../pages/login/login';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = SplashPage;
  pages: Array<{title: string, component: any}>;

  constructor(
    private translate: TranslateService,
    public platform: Platform,
    public network: Network,
    public statusBar: StatusBar,
    public splashScreen: SplashScreen,
    public storage: Storage,
    public alertCtrl: AlertController
  ) {
    this.initializeApp();
    this.initTranslate();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'STATUS', component: StatusPage },
      { title: 'JOBS', component: JobsListPage },
      { title: 'CLIENTS', component: ClientsListPage }
    ];
  }

  initializeApp() {
    this.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.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.listenConnection();
    }).catch(error => console.log(JSON.stringify(error)))
  }

  initTranslate() {
    // Set the default language for translation strings, and the current language.
    this.translate.setDefaultLang('de');
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }

  logoutClicked() {
    let confirmation = this.alertCtrl.create({
      title: 'Sind Sie sicher?',
      message: 'Sind Sie sicher, dass Sie sich abmelden möchten? Alle nicht synchronisierten Daten gehen dadurch verloren.',
      buttons: [
        {
          text: 'Abbrechen',
          handler: () => {
            console.log('Disagree clicked');
          }
        },
        {
          text: 'Abmelden',
          handler: () => {
            this.storage.clear().then(
              () => this.nav.setRoot(LoginPage)
            )
          }
        }
      ]
    });

    confirmation.present();
  }

  private listenConnection(): void {
    console.log(JSON.stringify(this.network.type))
    let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
      let alert = this.alertCtrl.create({title: 'Connection', message: 'Network has been disconnected', buttons: ['OK']})
      alert.present()
    });

    disconnectSubscription.unsubscribe();

    let connectSubscription = this.network.onConnect().subscribe(() => {
      let alert = this.alertCtrl.create({title: 'Connection', message: 'Network has been connected', buttons: ['OK']})
      alert.present()
    })

    connectSubscription.unsubscribe();
  }
}

谢谢，

推荐答案

以下是如何实现可以在设备（cordova）和pwa模式下工作的网络监视器。在您的情况下，您取消订阅了您应该保留的订阅。

Here is how you can implement a "network monitor" that can work on both device (cordova) and pwa modes. In your case you were unsubscribing from the subscription which you should keep actually.

  // DETECT DEVICE/BROWSER:
  this.appIsOnDevice = !this.platform.url().startsWith('http');

  // INIT NETWORK MONITOR:
  initNetworkMonitor() {
    // check if we are on device or if its a browser
    if (this.appIsOnDevice) {
      // watch network for a disconnect
      this.disconnectSubscription = this.network
        .onDisconnect()
        .subscribe(() => {
          console.log("network disconnected:(");
          // do alert here
        });
      // watch network for a connection
      this.connectSubscription = this.network.onConnect().subscribe(() => {
        console.log("network connected!");
        // app got back online, do logic here
        if (this.network.type === "wifi") {
          console.log("we got a wifi connection, woohoo!");
        }
      });
    } else {
      this.browserOffline = Observable.fromEvent(window, "offline").subscribe(
        () => {
          // go offline logic here
        }
      );
      this.browserOnline = Observable.fromEvent(window, "online").subscribe(
        () => {
          // go back online
        }
      );
    }
  }

这篇关于原生离子网络状态对我的代码不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！