Angular 16中如何让@Input像Signal一样工作？

方案1：使用Angular 16+官方推荐的input()信号输入 #

Angular 16引入了input()函数，专门用于创建与输入属性绑定的信号，这是最简洁的官方方案：

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

export class TableComponent {
  // 定义带默认值的信号输入，外部传入值会自动同步到信号中
  headers = input<any[]>([]);
  keys = input<any[]>([]);
  data = input<any[]>([]);

  // 若需基于输入信号派生新的响应式值，可搭配computed使用
  rowCount = computed(() => this.data().length);
}

使用时直接像普通@Input一样在模板中绑定：

<app-table [headers]="tableHeaders" [keys]="columnKeys" [data]="tableData"></app-table>

方案2：传统@Input结合Setter更新Signal #

如果项目使用Angular 16以下版本，或者需要在输入值变化时执行额外逻辑，可通过@Input的setter手动同步值到Signal：

import { signal } from '@angular/core';

export class TableComponent {
  // 内部维护可写的Signal实例
  private _headers = signal<any[]>([]);
  private _keys = signal<any[]>([]);
  private _data = signal<any[]>([]);

  // 暴露只读信号供组件内部/模板使用，避免外部直接修改
  headers = this._headers.asReadonly();
  keys = this._keys.asReadonly();
  data = this._data.asReadonly();

  // 通过@Input setter同步外部值到Signal
  @Input() set headersInput(value: any[]) {
    this._headers.set(value ?? []);
    // 这里可添加值变化时的额外处理逻辑
  }

  @Input() set keysInput(value: any[]) {
    this._keys.set(value ?? []);
  }

  @Input() set dataInput(value: any[]) {
    this._data.set(value ?? []);
  }
}

模板中绑定对应的setter输入属性：

<app-table [headersInput]="tableHeaders" [keysInput]="columnKeys" [dataInput]="tableData"></app-table>

注意事项 #

• 不要直接将Signal实例作为@Input的属性值，Angular的@Input机制针对普通变量设计，无法直接识别Signal的内部状态。
• 若输入值为可选类型，记得在setter中处理null/undefined情况，避免Signal被设置为无效值。

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