Angular：使用 setter 与使用 ngModelChange 更新另一个字段（绑定到 getter、setter 在 angular 世界中不好吗？）

Question

我有两个字段 - html select 控件和文本输入控件。 select 在 select 控件中选择一个选项后，文本输入应该被清除并更新为默认值（尽管用户仍然可以编辑它）。

有两种方法可以做到这一点 -

一个。使用 setter & getter

<select [(ngModel)]="selectedItem ">
    <option value="one">One</option>
     ...
</select>
<input [(ngModel)]="textValue">

textValue: string;
get selectedItem(): string {
   return _selectedItem;
}
set selectedItem(value: string) {
   this._selectedItem = value;
   this.textValue = some-default-value;
}

b。使用 ngModelChange

<select [(ngModel)]="selectedItem " (ngModelChange)="onSelectionChange($event)">
    <option value="one">One</option>
     ...
</select>
<input [(ngModel)]="textValue">

textValue: string;
selectedItem: string;
public onSelectionChange() {
   this.textValue = some-default-value;
}

我个人喜欢方法 #a（看起来更像 MVVM 而不是 #2 中的事件驱动的 Winforms），但我听说在中使用 getters 和 setters 实际上是不好的angular世界。很少有争论是-

使用 getters 而不是直接绑定到实例成员可能会影响性能（angular 更改检测可能表现不同？）
如果我们继续鼓励使用 getters setters，您很容易通过在 getter/setter 中放置一些逻辑而导致您的应用程序滥用它最终可能会导致 UI 中的数据与实际模型数据不同步（这也会导致 ExpressionChangedAfterItHasBeenCheckedError 错误），因此最好坚持方法 #b

你有什么看法？angular 应用程序是否应该坚持方法 #b？

提前致谢。

Answer 1

只要您不绑定它们就可以使用它们（您始终可以绑定到支持字段）。 angular 关于 getter 和 setter 的变化检测的问题在于它们实际上是函数，因此变化检测机制必须每个周期运行它们来检查是否有变化。

您实际上可以在 angular.

中使用 setter 提高性能

通过

设置组件完成

@Component({
  // ...
  changeDetection: ChangeDetectionStrategy.OnPush
})

和运行在您的设置器中使用 ChangeDetectorRef 进行变化检测。

但这有点高级，需要一些关于变更检测系统的知识才能正确使用它，这种方法会影响组件的所有子组件，因此实际上可能会弄乱第 3 方组件。

我只是在这里提到它，以防你在项目中遇到一切开始显着放缓的地步

Angular：使用 setter 与使用 ngModelChange 更新另一个字段（绑定到 getter、setter 在 angular 世界中不好吗？）

Angular: Using setter vs Using ngModelChange to update another field (binding to getter, setter are bad in angular world?)

getter-setter

angular