【问题标题】:How to not dismiss the alert box when clicking outside of it on Ionic在 Ionic 上单击警报框外部时如何不关闭警报框
【发布时间】:2017-11-26 08:11:28
【问题描述】:

我正在构建一个 ionic 2 应用程序,我正在使用以下组件

http://ionicframework.com/docs/components/#alert

  import { AlertController } from 'ionic-angular';

export class MyPage {
  constructor(public alertCtrl: AlertController) {
  }

  showAlert() {
    let alert = this.alertCtrl.create({
      title: 'New Friend!',
      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
      buttons: ['OK']
    });
    alert.present();
  }
}

如何确保当我在框外单击时警报不会被解除?

【问题讨论】:

    标签: angular typescript ionic2 ionic3 ionic4


    【解决方案1】:

    在 alertCtrl.create 选项中设置 enableBackdropDismiss: false

    【讨论】:

      【解决方案2】:

      离子 2/3:

      正如您在the AlertController docs 中看到的,您可以在创建警报时使用enableBackdropDismiss(布尔值)选项:

      enableBackdropDismiss:是否应通过点击背景来解除警报。默认 真的

      import { AlertController } from 'ionic-angular';
      
      // ...
      export class MyPage {
      
        constructor(public alertCtrl: AlertController) {}
      
        showAlert() {
          let alert = this.alertCtrl.create({
            title: 'New Friend!',
            subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
            buttons: ['OK'],
            enableBackdropDismiss: false // <- Here! :)
          });
      
          alert.present();
        }
      }
      

      离子 4/5:

      在 Ionic 4/5 中,this property 已重命名为 backdropDismiss

      backdropDismiss:如果为 true,则单击背景时将关闭警报。

      import { AlertController } from '@ionic/angular';
      
      //...
      export class MyPage {
      
        constructor(public alertController: AlertController) {}
      
        async showAlert() {
          const alert = await this.alertController.create({
            header: 'Alert',
            subHeader: 'Subtitle',
            message: 'This is an alert message.',
            buttons: ['OK'],
            backdropDismiss: false // <- Here! :)
          });
      
          await alert.present();
        }
      }
      

      【讨论】:

      • 在 ionic 4 中,' backgroundDismiss: false '
      • 感谢@PradipVadher,我已经更新了答案以包含与 Ionic 4 相关的信息 :)
      【解决方案3】:

      在 ionic 4 中,该选项已重命名为

      backdropDismiss: false
      

      【讨论】:

      • 添加更多细节
      • 不确定您在寻找什么额外的细节,接受的答案对最新 Ionic 4 上的 Ionic 的早期版本有效,该参数已从 enableBackdropDismiss 重命名为 backgroundDismiss
      • @Pete 是正确的,对于那些使用 IONIC 4 的人,您将不得不使用此选项。
      • 你这个摇滚老兄!在那里救了我几分钟:)
      猜你喜欢
      • 2020-02-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2010-10-02
      • 1970-01-01
      • 2017-11-13
      相关资源
      最近更新 更多