Question

我正在创建简单的ionic 4 angular应用程序，并使用ionic popover modal。下面的代码显示了我的开放式弹出窗口模式

//home.page.ts
async openModal(ev: Event) {
const modal = await this.popoverController.create({
  component: ModalPage,
  componentProps: {
    avatar: this.item_list //item list is array of two element id and name
  }
});
modal.onDidDismiss().then((dataReturned) => {
  if (dataReturned !== null) {
    // dataReturned.data;
    alert('Modal Sent Data :' + dataReturned);
    console.log('Modal Sent Data :' + dataReturned);
  }
});
return await modal.present();
}

下面的模态代码

//ModalPage.page.ts
closeModal(data: any) {
this.popoverController.dismiss(data);
}
}

下面的代码ModalPage.page.html

 <ion-row>
  <div *ngFor="let item of item_list">
    <ion-col>
      <button ion-button 
    (click)="closeModal($event)">
        <ion-icon 
       [src]="item.avatar"></ion-icon>
      </button>
    </ion-col>
  </div>
</ion-row>

当单击按钮并取消调用以将值发送到home.page.ts并显示在home.page.html上时，如何从模态中检索值？

Answer 1

您正在请求模态帮助，但您使用的是popoverController。无论如何，您可以使用ion-modal以这种方式获得价值。

home.ts

....
import { ModalController } from '@ionic/angular';
....
constructor(public modalController: ModalController) {}
....
async presentModal() {
  const modal = await this.modalController.create({
    component: ModalPage,
    componentProps: {
       avatar: this.item_list //item list is array of two element id and name
    }
  });
modal.onDidDismiss().then((dataReturned) => {
    if (dataReturned !== null) {
      // dataReturned.data;
      alert('Modal Sent Data :' + dataReturned);
      console.log('Modal Sent Data :' + dataReturned);
    }
  });
  return await modal.present();
}

ModalPage.page.ts

closeModal(data: any) {
  this.modalController.dismiss(data);
}

ModalPage.page.html

  <ion-row>
    <div *ngFor="let item of item_list">
      <ion-col>
        <button ion-button (click)="closeModal($event)">
          <ion-icon [src]="item.avatar"></ion-icon>
        </button>
      </ion-col>
    </div>
  </ion-row>

希望对您有帮助：）

注意： popoverController 和 modalController 这两个组件及其用法都不同。

Answer 2

我只是在按钮点击事件click（item）中传递参数并获取点击数据。

<ion-row>
<div *ngFor="let item of item_list">
  <ion-col>
    <button ion-button (click)="closeModal(item)">
      <ion-icon [src]="item.avatar"></ion-icon>
    </button>
  </ion-col>
</div>

如何从离子弹出模式中检索选定的值

2 个答案: