关闭错误的离子模式答案

【问题标题】：Ionic Modal On Dismiss Bug关闭错误的离子模式
【发布时间】：2022-07-04 15:46:18
【问题描述】：

我正在构建一个小应用程序，我发现了这个“错误”，因为我不知道这是否可能发生在更多人身上，但我认为在这里提及很有趣。所以问题是我用一个简单的登录表单制作了一个模式。当您从表单提交数据时，它会输入方法login()，如下面的代码示例所示。问题是，当调用登录方法并完成所有操作时，我会关闭模式传递数据，以便通知其他页面发生了某些变化。但奇怪的是，当我在网络上时，这个 modal.onDismiss() 传递数据不会在页面上触发。它仅在移动设备且模式为全屏时触发。有人知道为什么会发生这种情况以及如何解决吗？

打开modal的方法：

async showLoginModal() {
const modal = await this.modalController.create({
  component: LoginModalComponent
});
await modal.present();
this.menuController.close();
modal.onDidDismiss().then((data) => {
  console.log(data)
  Storage.get({ key: 'user' }).then( response => {
    let user: User = JSON.parse(response.value);
    console.log(user);
    if(user.email != null){
      this.logged = true;
    }
  });
});
}

在模式内提交时触发登录方法。

async login(){
let user: User = {
  email: this.credentials.controls['email'].value
}
await Storage.set({ key: 'user', value: JSON.stringify(user) });
await this.modalController.dismiss(user);
}

我在这里留下一个视频，以更直观的方式向您展示：Click me

【问题讨论】：

我建议在这里填写错误报告：github.com/ionic-team/ionic-framework/issues

标签： angular angularjs ionic-framework modal-dialog ionic6

【解决方案1】：

尝试以这种方式更改您的代码

async showLoginModal() {
const modal = await this.modalController.create({
  component: LoginModalComponent
});
modal.onDidDismiss().then((data) => {
  console.log(data)
  Storage.get({ key: 'user' }).then( response => {
    let user: User = JSON.parse(response.value);
    console.log(user);
    if(user.email != null){
      this.logged = true;
    }
  });
});
await modal.present();
this.menuController.close();
}

【讨论】：