离子 3 警报；调用dismiss（）后调用present（）不起作用

Posted 2023-03-13

【中文标题】离子 3 警报；调用dismiss（）后调用present（）不起作用

【英文标题】：Ionic 3 Alert; calling present() not working after calling dismiss()

【发布时间】：2019-02-08 11:18:51

【问题描述】：

我的 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 是导致这种情况发生的原因，但我无法控制。

如果有更好的方法来处理这种行为，请告诉我。

【参考方案1】：

您可以在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;
    
  

【讨论】：

我最终把它写在了app.component.ts中。但是在我的情况下使用 onChange() 比使用两个不同的 onConnect() 和 onDisconnect() 更有用。

好的。但是你已经要求提醒了。

是的。 onChnage() 也可以触发警报。如所选答案所示

您有多种选择。您可以选择其中任何一个。如果您不喜欢这个答案，请留下或投反对票。

【参考方案2】：

你可以试试这个解决方案。

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

【讨论】：

感谢您的解决方案。这是一个简单的解决方法。就问，为什么关闭后提示不能再次显示？

在您的情况下，警报仅创建一次，但每次网络在线/离线时都会调用订阅方法

是的。我的意思是我创建了一次警报。但根据网络变化，它应该多次呈现和关闭。 dismiss() 调用是否会破坏创建的警报？估计不是。可能是构建的错误或问题？