Angular 12中如何向模态组件传递对象？现有代码报错求助

错误原因 #

你通过@ViewChild('modal')尝试获取GivePointsComponent实例，但该组件是通过modalCtrl.create()动态创建的，并非直接在父组件模板中声明，因此this.modal始终为undefined，触发了"Cannot set properties of undefined"错误。

正确实现方式 #

使用Ionic模态组件的componentProps属性传递参数，这是动态创建模态时传递数据的标准方案，修改代码如下：

父组件TypeScript（修改后）

export class HomePage implements OnInit {
    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',
            // 通过componentProps传递media对象给子组件
            componentProps: {
                media: this.media
            }
        });
        // 必须调用present()才能打开模态
        await modal.present();
    }
}

注意：移除原代码中的@ViewChild('modal') modal: GivePointsComponent;，该声明完全无用。

子组件TypeScript（无需修改）

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

子组件HTML（优化可选）

添加安全导航操作符?.，避免media未初始化时触发空值报错：

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

关键说明 #

1. 动态创建的模态组件无法通过@ViewChild获取实例，必须用componentProps传递参数
2. 不要忘记调用modal.present()，否则模态不会显示
3. 使用?.操作符可以提升页面稳定性，避免数据未加载时的报错

内容的提问来源于stack exchange，提问作者SimonIoa