如何在 Ionic 上单击警报框外部时不关闭警报框

Question

我正在构建一个 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();
}
}

如何确保在框外单击时不会消除警报？

Answer 1

离子 2/3：

正如您在 AlertController 文档中所看到的，您可以在创建警报时使用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 中，此属性已重命名为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();
}
}

Answer 2

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

backdropDismiss: false

Answer 3

在alertCtrl.create options 中设置 enableBackdropDismiss： false