离子4-从模态传回数据 [英] Ionic 4 - Pass Data BACK from Modal

问题描述

我正在尝试创建一个模态窗口，将其传递给对象数组，让用户从该数组中选择一个对象，然后让我的模态传递回他们选择的对象.

I'm trying to create a modal window, pass it an array of objects, have a user select one object from that array, and then have my modal pass back the object they've selected.

我已经尝试使用modalName.onDidDismiss(data =>…)的Ionic 2方法

I've tried using the Ionic 2 approach of modalName.onDidDismiss(data=> …) as explained here, but apparently Ionic 4 changed "onDidDismiss" to not accept any values passed back to it.

所以我不知道如何将数据从模态"窗口发送回调用它的页面.

So I'm at a loss for how to send data from my Modal window back to the page that called it.

推荐答案

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

Some days ago I had the same problem and here's my solution:

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

I guess, you already have a component which contains the actual modal. name UserModalComponent

您的UserModalComponent应该注入ModalController:

Your UserModalComponent should get the ModalController injected:

constructor(private modalController: ModalController){}

constructor(private modalController: ModalController){}

下一步是将所选用户传递回去:

Next step is to pass the selected user back:

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

在要调用模式并吸引用户的组件中，还必须如上所述注入ModalController，此外，您需要此方法:

In your component in which you want to call the modal and get the user back, you also have to inject the ModalController as above and additionally, you need this method:

 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();
  }

我希望这会有所帮助！如果有什么不清楚的地方，问一下即可！

I hope this helps! If anything is unclear, just ask!

这篇关于离子4-从模态传回数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！