Ionic中通过ModalController.create()创建模态框时如何传递itemId给组件

在调用modalController.create时添加componentProps配置项即可传递自定义参数，接收方使用@Input装饰器直接接收即可。

1. 调整模态框创建代码 #

修改你的presentMarketplaceItem方法，添加参数传递配置：

async presentMarketplaceItem(itemId: number) {
    const modal = await this.modalController.create({
      component: MarketplaceItemPage,
      cssClass: '',
      mode: 'ios',
      // 新增参数传递配置
      componentProps: {
        itemId: itemId
      }
    });
    return await modal.present();
}

2. MarketplaceItemPage接收参数 #

在MarketplaceItemPage的对应TS文件中，通过@Input装饰器声明接收参数：

import { Component, Input } from '@angular/core';

@Component({
  // 你的组件原有配置
})
export class MarketplaceItemPage {
  // 直接接收传递过来的itemId
  @Input() itemId!: number;

  ngOnInit() {
    // 组件初始化后即可直接使用该参数
    console.log('接收到的itemId:', this.itemId);
  }
}

该方案兼容Ionic 4及以上所有版本，不需要额外引入其他依赖。

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