本机离子网络状态不适用于我的代码

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