Ionic 8/Angular 18迁移：用@Input替换NavParams失效问题

开发者阿泽

2026-6-19

迁移Ionic 8/Angular 18 Modal传参问题解决方案

问题根源

@Input赋值时机问题：Angular的@Input属性在组件构造函数执行时还未完成绑定，此时expense仍是默认的空对象，直接访问this.expense[0]会触发Cannot read properties of undefined (reading '0')错误。
组件传参格式错误：原父组件直接将this.expense传给componentProps，这会把this.expense的所有键作为独立props传递给子组件，而非将整个this.expense作为expense属性传入，导致子组件@Input() expense无法接收到正确数据。

修正步骤

1. 父组件修正：明确传参格式

将componentProps改为键值对形式，把this.expense包装为expense属性传递：

receiptimg(){
  this.modalCtrl.create({
    component: ReceiptPage,
    componentProps: { expense: this.expense } // 用键值对明确传递expense属性
  }).then(modalres => {
    modalres.present();
    modalres.onDidDismiss().then(res => {     
    })
  })     
}

2. 子组件修正：调整初始化时机并移除NavParams

移除NavParams依赖，Ionic 8推荐用@Input接收Modal参数
将依赖expense的初始化逻辑移至ngOnInit（此时@Input已完成绑定）
添加空值判断，避免数组为空时报错

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

export class ReceiptPage implements OnInit {
  @Input() expense: any[] = []; // 改为数组类型更贴合业务逻辑
  expenseOnly: any = {};
  expenseimg = null;

  constructor(private modalCtrl: ModalController) { 
    // 构造函数中不再处理expense相关逻辑
  }

  ngOnInit() {
    // 确保expense数组有数据再访问索引0
    if (this.expense.length > 0) {
      this.expenseOnly = this.expense[0];
      this.expenseimg = this.expenseOnly.expense_receipt;
    }
  }

  close(){
    this.modalCtrl.dismiss(this.expense);
  }
}