如何不使用effect实现Angular输入与signal store同步？

我有一个简单的UserStore信号存储，其状态结构为：

{ username: string }

现在我创建了一个使用该存储的UserComponent组件，组件中使用了signal输入：

readonly #store = inject(UserStore);
username = input.required<string>();

当组件输入值变化时，更新信号存储的正确方式是什么？目前我用effect实现：

constructor() {
  effect(
    () => {
      const username = this.username();
      this.#store.setUsername(username);
    },
    { allowSignalWrites: true }
  );
}

但查看Angular文档后，我认为应避免使用effect。我是否应该改用带setter的@Input注解？

@Input({ required: true })
set username(value: string) {
  this.#store.setUsername(value);
}

使用带setter的@Input是这类场景的最佳方案，具体原因如下：

1. 语义更直观清晰
   setter直接绑定输入属性的变化，代码逻辑一目了然——输入值更新时立即同步到存储，相比effect的间接依赖追踪，可读性和维护性更强。

2. 符合Angular的设计意图
   Angular文档明确指出，effect主要用于副作用操作（比如DOM修改、日志上报、调用外部API等），而输入属性变化触发存储更新属于组件与状态层的同步逻辑，用setter更贴合输入属性的原生用法，无需额外开启allowSignalWrites这类特殊配置。

3. 性能与复杂度更优
   使用effect会让Angular额外追踪signal输入的依赖关系，而setter是Angular输入属性的原生机制，不需要额外的依赖追踪开销，逻辑更轻量。

如果后续需要扩展逻辑（比如添加输入值校验），setter也更容易修改，示例如下：

@Input({ required: true })
set username(value: string) {
  const trimmedValue = value.trim();
  if (trimmedValue) { // 新增校验逻辑
    this.#store.setUsername(trimmedValue);
  }
}

反观effect方案，属于用复杂机制解决简单问题，仅适合需要基于多个信号组合触发副作用的场景，对于单一输入同步存储的需求来说是过度设计。

总结：放弃effect实现，改用带setter的@Input来同步输入值到UserStore是更合理的选择。

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