Ionic 8、Angular 18 - 使用 @Input 替换 NavParams 不起作用

Question

我正在将 Ionic 6/Angular 14 应用程序迁移到 Ionic 8/Angular 18。

在我的旧代码中 -

父 ts 文件打开一个名为 ReceiptPage 的子组件，并将 this.expense 作为组件 prop 传递

 receiptimg(){
      this.modalCtrl.create({
        component: ReceiptPage,
        componentProps: this.expense
      }).then( modalres => {
          modalres.present();
          modalres.onDidDismiss().then(res =>{     
          })
       })     
    }

在子组件中，即 ReceiptPage .ts 文件中有以下代码：

export class ReceiptPage implements OnInit {
expense: any = {};
  expenseOnly: any = {};
  expenseimg = null;

  constructor(
    private modalCtrl: ModalController,
    private navParams: NavParams
    ) { 
        this.expense = this.navParams.data;
        this.expenseOnly = this.expense[0];
        this.expenseimg = this.expenseOnly.expense_receipt;
    }

  ngOnInit() {
  }

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

}

我从“@angular/core”导入输入，然后将

expense: any = {};

替换为

@Input()  expense: any = {};

但是，如果现在我尝试设置

this.expenseOnly = this.expense[0];

，应用程序将无法编译和运行。

Answer 1

我认为它应该作为一个对象传递，其中每个名称都与相应的

@Input

名称相匹配。

    receiptimg(){
      this.modalCtrl.create({
        component: ReceiptPage,
        componentProps: { expense: this.expense, ... } // <- changed here!
      }).then( modalres => {
          modalres.present();
          modalres.onDidDismiss().then(res =>{     
          })
       })     
    }