Ionic 3 Alert;调用 out() 后调用 present() 不起作用

Question

我的Ionic应用程序中有一个网络检测功能。目标是在没有网络的情况下防止用户进行交互。

页面组件中的代码如下：

ionViewDidEnter() {
this.alert = this.alertCtrl.create({
title: 'No Network!',
subTitle: 'Please Connect to Internet to Continue',
enableBackdropDismiss: false
});
if(this.networkCheck.checkNetworkType() === 'none' || this.networkCheck.checkNetworkType() === 'unknown'){
this.alert.present();
}
this.networkSubscription = this.networkCheck.onStatusChange().subscribe(
data => {
console.debug(data);
if(data.type === 'offline'){
this.alert.present();
this.toast.show(data.type);
}
else if(data.type === 'online'){
this.alert.dismiss();
this.toast.show(data.type);
}
})
}
ionViewWillLeave() {
this.networkSubscription.unsubscribe();
}

在提供者中：

onStatusChange(){
return this.network.onchange()
}

问题是，当 Toast 显示所有状态更改时，警报弹出窗口仅在网络断开连接时首次显示。首次被关闭后，它不会再次出现。

你能帮我这个吗？我猜有些东西 viewDismiss是发生这种情况的原因，但我无法抓住这一点。

也请让我知道是否有更好的方法来处理这种行为。

Answer 1

您可以尝试此解决方案。

alert:any;
showAlert(){
this.alert = this.alertCtrl.create({
title: 'No Network!',
subTitle: 'Please Connect to Internet to Continue',
enableBackdropDismiss: false
});
this.alert.present();
}
ionViewDidEnter() {

if (this.networkCheck.checkNetworkType() === 'none' || this.networkCheck.checkNetworkType() === 'unknown') {
this.showAlert();
}
this.networkSubscription = this.networkCheck.onStatusChange().subscribe(
data => {
console.debug(data);
if (data.type === 'offline') {
this.showAlert();
this.toast.show(data.type);
}
else if (data.type === 'online') {
this.alert && this.alert.dismiss();
this.toast.show(data.type);
}
})
}
ionViewWillLeave() {
this.networkSubscription.unsubscribe();
}

Answer 2

您可以在app.component.ts文件中编写代码，以便它适用于所有页面。

import { Component, ViewChild } from '@angular/core';
import { Platform, Nav, Alert, AlertController } from 'ionic-angular';
import { Network } from '@ionic-native/network';
import { Subscription } from 'rxjs';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
networkWarningAlert: Alert = null;
disconnectSubscription: Subscription = null;
connectSubscription: Subscription = null;
constructor(public platform: Platform,
public alert: AlertController,
private network: Network) {
platform.ready().then(() => {
this.SubscribeNetworkAction();
});
}
isConnected(): boolean {
let conntype = this.network.type;
return conntype && conntype !== 'unknown' && conntype !== 'none';
}
SubscribeNetworkAction() {
if (!this.platform.is("cordova"))
return;
if (!this.isConnected() && !this.networkWarningAlert) {
this.networkWarningAlert = this.alert.create({
title: 'No network',
message: 'Check your internet connection',
enableBackdropDismiss: false,
buttons: [{
text: "Exit",
handler: () => { this.platform.exitApp(); }
}]
})
this.networkWarningAlert.present();
}
this.disconnectSubscription = this.network.onDisconnect().subscribe(() => {
if (!this.networkWarningAlert) {
this.networkWarningAlert = this.alert.create({
title: 'No network',
message: 'Check your internet connection',
enableBackdropDismiss: false,
buttons: [{
text: "Exit",
handler: () => { this.platform.exitApp(); }
}]
})
this.networkWarningAlert.present();
}
});
this.connectSubscription = this.network.onConnect().subscribe(() => {
if (this.networkWarningAlert) {
this.networkWarningAlert.dismiss();
this.networkWarningAlert = null;
}
// this code is used for refresh current page.
var currentStack = this.nav.getViews();
this.nav.setRoot(currentStack[0].component);
for (var i = 1; i < currentStack.length; i++) {
this.nav.push(currentStack[i].component, currentStack[i].getNavParams());
}
});
}
UnSubscribeNetworkAction() {
if (!this.platform.is("cordova"))
return;
if (this.disconnectSubscription) {
this.disconnectSubscription.unsubscribe();
this.disconnectSubscription = null;
}
if (this.connectSubscription) {
this.connectSubscription.unsubscribe();
this.connectSubscription = null;
}
}
}