Question

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

我尝试使用modalName.onDidDismiss（data =>…）as explained here的Ionic 2方法，但是显然Ionic 4更改了“ onDidDismiss”以不接受任何传递回它的值。

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

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

下面的代码对我有用。

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 3

这是从Ionic 4的模态中获取数据的方式：

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

离子4-从模态传回数据

3 个答案: