Angular 2双向数据绑定冗余设置器调用

Question

我想按照本教程在我的组件中实现双向数据绑定：https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html。它有效，但我发现每次更改后，当变量被“绑定”时，setter 会被调用两次。第二个似乎完全多余。我注意到教程中出现了同样的问题 - 我修改了 Plunker 以显示它：https://embed.plnkr.co/Pd39vssP2Cg4aSacFFlF/。

我什至注意到，当变量值更改省略 setter 时也会发生冗余 setter 调用 - 例如 this.counterValue++。

我相信场景是这样的：

1. 组件通过发送事件通知观察者有关更改；
2. 观察者更改“绑定”变量并通知变量在其一侧发生了更改；
3. 初始组件接收到变量已更改的信息并尝试将变量更改为相同的值。

积极的一面是它不会永远这样。
不过，在我看来，第三点不应该发生。

我显然可以使用简单的if(this.counterValue !== val)，但这似乎不是解决这个问题的优雅方式。我认为一开始就不应该进行多余的调用。

有什么办法可以避免还是完全正常？是实现双向数据绑定的正确方法还是教程中的示例是错误的？

Answer 1

您不应该在更改检测调用的方法中发出事件。

@Input() 设置器在值由绑定设置时由更改检测调用。

这会破坏单向数据流，因为由于 this.counterChange.emit(this.counterValue); 而通过更改检测传播到子级的父级更改会传播回父级。

您应该重新考虑您的架构。按钮上的点击事件应该更新模型，而不是更改模型来改变模型。

将发出事件的代码移动到事件处理程序应该修复它

decrement() {
  this.counter--;
  this.counterChange.emit(this.counterValue);
}