如何在不使用效果的情况下将角度输入与信号存储同步

Question

假设我有一个简单的

UserStore

信号存储，具有简单的状态：

{ username: string }

现在我使用该存储创建了一个组件 UserComponent，并且该组件有一个信号输入：

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

当组件输入值发生变化时，更新信号存储的正确方法是什么？ 到目前为止我正在使用一个效果：

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

但是查看角度文档，我确实认为应该避免使用效果。

我应该依赖

@Input

注释吗？

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

Answer 1

我个人会使用

ngOnChanges

作为解决方案。使用设置输入函数，您需要创建一个像

#_username

这样的变量，并验证该变量是否实际上已更改。否则，您可能会陷入循环或触发 ExpressionChangedAfterItHasBeenChecked 错误。但我想知道，父组件不能更新它的信号吗？这样，您就可以避免在组件中输入“用户名”，而是直接在计算属性中接收信号，从而使您的组件更加独立和干净。