如何在Ionic中点击模态外部时防止模态消除?

Ana*_*ury 10 ionic-framework ionic2 angular

我正在构建一个简单的移动应用程序,在主页和模态页面之间传递数据.虽然它在移动设备上运行良好,但在大屏幕上,模式并不能填满整个屏幕.因此,用户可以在屏幕外单击以关闭模式,该模态不会触发应该在模态解除时触发的任何函数.我的问题是,如何在模态外禁用单击.我不希望模式在外面点击时被忽略,但只有当我的"关闭"按钮被点击时才会被忽略.我的模态设置为:

在主页上:

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();
}
Run Code Online (Sandbox Code Playgroud)

在ModalPage上:

closeModal() {
    let data = {
        firstName: this.user.firstName,
        lastName: this.user.lastName,
        location: this.user.location
    }
    this.viewCtrl.dismiss(data);
}
Run Code Online (Sandbox Code Playgroud)

我觉得这应该是非常简单的事情,但我在网上找不到任何资源,而Ionic 2 Doc也不是很清楚.请帮忙.

rob*_*nnn 21

enableBackdropDismiss在创建模态时使用-option(链接到文档).

let modal = this.modalCtrl.create(ModalPage, { data: data }, { enableBackdropDismiss: false });
Run Code Online (Sandbox Code Playgroud)

  • 在最新的角度版本中,它是`backdropDismiss` (3认同)

小智 5

For ionic 4

backdropDismiss:false,
Run Code Online (Sandbox Code Playgroud)

the model should be created like this

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