如何用Angular的@Input替代NavParams向Ionic模态框传参？

1. 父组件：触发模态框并传递参数 #

在需要打开模态框的组件中，通过ModalController的create方法，使用componentProps字段传递参数：

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { YourModalComponent } from '../your-modal/your-modal.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
})
export class ParentComponent {
  constructor(private modalController: ModalController) {}

  async openModal() {
    const modal = await this.modalController.create({
      component: YourModalComponent,
      // 传入需要传递给模态框的参数
      componentProps: {
        userId: 123,
        userName: 'Alice'
      }
    });
    return await modal.present();
  }
}

2. 模态框组件：用@Input接收参数 #

在模态框组件中，直接使用Angular的@Input装饰器声明接收的参数，替代原来的NavParams：

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

@Component({
  selector: 'app-your-modal',
  templateUrl: './your-modal.component.html',
})
export class YourModalComponent {
  // 用@Input声明需要接收的参数，类型根据实际业务定义
  @Input() userId!: number;
  @Input() userName!: string;

  ngOnInit() {
    console.log('接收的用户ID:', this.userId);
    console.log('接收的用户名:', this.userName);
  }
}

在模态框模板中直接绑定参数：

<ion-content>
  <p>用户ID: {{ userId }}</p>
  <p>用户名: {{ userName }}</p>
</ion-content>

3. 可选：基于Signals的输入API（Ionic 7+/Angular 16+） #

如果项目使用较新版本的Ionic和Angular，可使用官方推荐的Signals输入API：

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

@Component({
  selector: 'app-your-modal',
  templateUrl: './your-modal.component.html',
})
export class YourModalComponent {
  // 使用input()创建信号式输入参数，可设置默认值
  userId = input<number>(0);
  userName = input<string>('');

  ngOnInit() {
    // 信号参数需通过调用方法获取值
    console.log('接收的用户ID:', this.userId());
    console.log('接收的用户名:', this.userName());
  }
}

模板中使用信号参数：

<ion-content>
  <p>用户ID: {{ userId() }}</p>
  <p>用户名: {{ userName() }}</p>
</ion-content>

以上方式完全替代了NavParams的用法，符合官方迁移建议，同时保留了通过componentProps传参的逻辑。

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