Ionic 如何防止模态解散时,点击模态以外的离子?

bxjv4tth  于 2022-12-09  发布在  Ionic
关注(0)|答案(3)|浏览(217)

我正在开发一个简单的移动的应用程序,它可以在主页和模态页面之间传递数据。虽然它在移动设备上运行得很好,但在大屏幕上,模态页面不会占据整个屏幕。因此,用户可以在屏幕外点击来关闭模态页面,而这不会触发我的任何功能,而这些功能本应在模态页面关闭时触发。我的问题是:如何禁用模态外的点击。我不希望模态在点击外部时关闭,但只有当我的“关闭”按钮被点击时才关闭。我的模态设置为:
在主页上:

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也不是很清楚,请帮忙。

kr98yfug

kr98yfug1#

在创建模态时使用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
});
zf2sa74q

zf2sa74q2#

对于离子4

backdropDismiss:false,

模型应按如下方式创建

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

vsikbqxv3#

我的问题是解决使用下面的代码在离子6

<ion-modal [isOpen]="true" [swipeToClose]="true" [backdropDismiss]="false" [breakpoints]="[0.1, 0.3, 1]"  [initialBreakpoint]="0.3">

这是一个主要关键词

[backdropDismiss]="false"

相关问题