Ionic 4 - 从Modal传递数据

Question

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

我已尝试使用modalName.onDidDismiss(data => ...)的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);
})