Angular中重构直接修改的@Input为input信号的正确实现方式咨询

嗨，我来帮你理清这个Angular信号重构的问题～

首先得明白：Angular的input()信号是只读信号，它的设计初衷就是接收父组件传入的值，组件内部不允许直接修改它——这是Angular为了强化单向数据流最佳实践而做的限制，和之前普通@Input属性可以随意修改的情况不一样。

那针对你的需求（必须要在组件内部更新这个值），有两种常见的解决方案，你可以根据实际场景选择：

方案一：内部维护可变信号（仅组件内部使用更新后的值） #

如果你的更新只需要在当前组件内部生效，不需要把新值回传给父组件，可以用一个内部的可变signal()来同步input信号的值，之后在组件内部修改这个可变信号：

@Component({ ... })
export class SomeComponent {
  // 接收父组件传入的只读input信号
  testInput = input(null);
  // 内部可变信号，初始值同步input的初始值
  test = signal(this.testInput());

  ngOnInit() {
    // 现在可以自由修改内部的test信号了
    this.test.set('qwerty');
  }

  // 可选：如果需要监听父组件传入的testInput变化，自动同步到内部test
  constructor() {
    effect(() => {
      this.test.set(this.testInput());
    });
  }
}

方案二：使用model信号（支持双向绑定，更新后同步给父组件） #

如果你的更新需要回传给父组件，保持双向同步，那应该用Angular的model()信号——它是专门为双向绑定场景设计的，兼具input的接收能力和output的回传能力，内部可以直接调用set()或update()：

@Component({ ... })
export class SomeComponent {
  // 使用model信号替代input，支持双向绑定
  test = model(null);

  ngOnInit() {
    // 直接调用set修改值，父组件会自动收到更新
    this.test.set('qwerty');
  }
}

父组件中可以用双向绑定语法使用这个组件：

<app-some [(test)]="parentComponentValue"></app-some>

补充说明 #

之前普通@Input可以直接修改的做法，其实是不符合Angular单向数据流的最佳实践的——父组件应该是数据的唯一来源，子组件修改输入属性可能导致数据流混乱。而信号的设计就是为了避免这种问题，用只读的input()强制单向数据流，用model()处理双向绑定场景，让数据流更清晰可控。

备注：内容来源于stack exchange，提问作者Naren Murali