angular - native ionic 网络状态不适用于我的代码

Question

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

目标是当APP连接和断开时显示消息。我正在关注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();
  }
}

谢谢

Answer 1

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

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