在 Ionic 的模态之外单击时如何防止模态消失?
Posted
技术标签:
【中文标题】在 Ionic 的模态之外单击时如何防止模态消失?【英文标题】:How to prevent modal dismiss when clicked outside the modal in 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不是很清楚。请帮忙。
【问题讨论】:
【参考方案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,
,
【讨论】:
以上是关于在 Ionic 的模态之外单击时如何防止模态消失?的主要内容,如果未能解决你的问题,请参考以下文章