Ionic 如何在Angular 12中将对象从页面传递到模态组件

xn1cxnb4  于 2023-03-06  发布在  Ionic
关注(0)|答案(1)|浏览(128)

我想传递一个对象(媒体:any={};)到模态分量以显示诸如id等的媒体参数。
这是我目前掌握的情况。
HTML父组件

<ion-button fill="clear" (click)="modalPoints(media)">

类型提示父组件

export class HomePage implements OnInit {
    @ViewChild('modal') modal: GivePointsComponent;
    media: any = {};

async modalPoints(media) {
        this.media= media;
        const modal = await this.modalCtrl.create({
            component: GivePointsComponent,
            breakpoints: [0, 0.4, 1],
            initialBreakpoint: 0.4,
            cssClass: 'custom-modal'
        });
        this.modal.media = this.media;
    }

打字本儿童模式组件(GivePointsComponent.ts)

export class GivePointsComponent implements OnInit {
  @Input() media:any;

HTML模态组件(GivePointsComponent.html)

<app-modal-component #modal>
        <ion-label >{{media.msg_id}}<br>
          {{media.msg_id}}</ion-label>
</app-modal-component>

我应该得到媒体.msg_id,而不是我得到这个作为控制台上的错误;升

core.mjs:6469 ERROR Error: Uncaught (in promise): TypeError: Cannot set properties of undefined (setting 'media')
TypeError: Cannot set properties of undefined (setting 'media')
7gcisfzg

7gcisfzg1#

您可以将数据作为componentProps传递给modal,如下所示:

async openModal(media: any)
  {
    let modal = await this.modalctrl.create({
      component: GivePointsComponent,
      componentProps: {media: media},
    });
    modal.present();
    modal.onDidDismiss().then(() => console.log('dismiss'));
  }

由于未提供介质,因此出现错误-〉介质未定义错误

相关问题