在 Ionic 的模态之外单击时如何防止模态消失？答案

【问题标题】：How to prevent modal dismiss when clicked outside the modal in Ionic?在 Ionic 的模态之外单击时如何防止模态消失？
【发布时间】：2017-12-27 23:44:03
【问题描述】：

我正在构建一个简单的移动应用程序，用于在主页和模式页面之间传递数据。虽然它在移动设备上运行良好，但在大屏幕上，模态不会填满整个屏幕。因此，用户可以在屏幕外单击以关闭模式，这不会触发我应该在模式关闭时触发的任何功能。我的问题是，如何禁用在模态外单击。我不希望模式在点击外部时关闭，但只有在点击我的“关闭”按钮时才会关闭。我的模态设置为：

在主页上：

open(){
    let modal = this.modalCtrl.create(ModalPage,
        {
            firstName: this.user.firstName,
            lastName: this.user.lastName,
            location: this.user.location
        });
    modal.onDidDismiss(data => {
            this.user.firstName = data.firstName;
            this.user.lastName = data.lastName;
            this.user.location = data.location;
    });
    modal.present();
}

在模态页面上：

closeModal() {
    let data = {
        firstName: this.user.firstName,
        lastName: this.user.lastName,
        location: this.user.location
    }
    this.viewCtrl.dismiss(data);
}

我觉得这应该是很简单的东西，但是我在网上找不到任何资源，而且Ionic 2 Doc不是很清楚。请帮忙。

【问题讨论】：

标签： angular ionic-framework ionic2

【解决方案1】：

在创建模式 (link to docs) 时使用enableBackdropDismiss-选项。

let modal = this.modalCtrl.create(ModalPage, { data: data }, { enableBackdropDismiss: false });

离子 4

const modal = await this.modalCtrl.create({
  component: ModalPage,
  componentProps: {
    'data': this.data 
  },
  backdropDismiss:false
});

【讨论】：

啊哈哈，enableBackdropDismiss 必须作为对象进入。当然！谢谢！
最新的 Angular 版本是backdropDismiss

【解决方案2】：

对于离子 4

backdropDismiss:false,

模型应该是这样创建的

 const modal = await this.modalCtrl.create({
      component: SetaddresComponent,
      cssClass: 'my-custom-modal-css',
      componentProps: { },
      showBackdrop:true,
      backdropDismiss:false,
    },

【讨论】：