web-dev-qa-db-ja.com

Ionic 4-モーダルからデータを戻す

モーダルウィンドウを作成し、オブジェクトの配列を渡し、ユーザーにその配列から1つのオブジェクトを選択させてから、モーダルに選択したオブジェクトを返させようとしています。

Ionic 2 modalName.onDidDismiss（data =>…） のアプローチをここで説明したように使用しようとしました が、明らかにIonic 4は、 "onDidDismiss"を変更して、返される値を受け入れないようにしました。

そのため、モーダルウィンドウから呼び出し元のページにデータを送信する方法がわかりません。

ionic-frameworkionic4
9
MLynch

数日前、私は同じ問題を抱えていました。ここに私の解決策があります：

すでに、実際のモーダルを含むコンポーネントがあります。名前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();
  }

これがお役に立てば幸いです！不明な点がある場合は、質問してください！

32
Lados

以下のコードは私のために働いています。

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();
  }
5
Swaran Gõdlã

これは、Ionic 4でモーダルからデータを取得する方法です。

        contactsModal.onDidDismiss().then(data=>{
        console.log('data came back from modal');
        console.log(data);
    })
1
Ion Scorobogaci
  //**to receive data from modal once the modal is closed** 
    dismiss() {
   this.viewCtrl.dismiss({id: this.id});//or this.viewCtrl.dismiss({id:24});

    }

   async openModal(brand) {
  const modal = await this.modalController.create({
  component: ViewBrandPage,
  componentProps: { name : brand.name, id : brand.id, sub : brand.sub_id }
  });
  // **data from modal once the modal is closed**
    modal.onDidDismiss()
    .then((data) => {
       const user = data.data.id;
      alert(user);
      console.log(user);
    });
   return await modal.present();
    }
0
Amarnath