Angular 2双向数据绑定冗余setter调用

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() setter 。

这会破坏单向数据流，因为通过更改检测传播给子节点的父节点的更改会因为this.counterChange.emit（this.counterValue）而传播回父节点;

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

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

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