Ionic 4 - 从模态传回数据

Question

我正在尝试创建一个模态 window，向其传递一个对象数组，让用户 select 从该数组中选出一个对象，然后让我的模态将对象传回给他们已经 selected.

我尝试使用 modalName.onDidDismiss(data=> …) 的 Ionic 2 方法，但显然 Ionic 4 已更改 "onDidDismiss" 不接受任何传递回的值它。

所以我不知道如何将数据从模态 window 发送回调用它的页面。

Answer 1

几天前我遇到了同样的问题，这是我的解决方案：

我想，您已经有了一个包含实际模态的组件。姓名 UserModalComponent

您的 UserModalComponent 应该注入 ModalController：

constructor(private modalController: ModalController){}

下一步是将所选用户传回：

selectUser(user: User):void {
  this.modalController.dismiss(user);
}

在您想要调用模态并让用户返回的组件中，您还必须如上所述注入 ModalController 此外，您需要此方法：

 async openUserModal() {
    const modal = await this.modalCtrl.create({
      component: UserModalComponent,
      componentProps: { users: this.users },
    });

    modal.onDidDismiss()
      .then((data) => {
        const user = data['data']; // Here's your selected user!
    });

    return await modal.present();
  }

希望对您有所帮助！有什么不明白的，尽管问！

Answer 2

这就是在 Ionic 4 中从模态取回数据的方法：

contactsModal.onDidDismiss().then(data => {
    console.log('data came back from modal');
    console.log(data);
})

Ionic 4 - 从模态传回数据

Ionic 4 - Pass Data BACK from Modal

ionic-framework

ionic4