1

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

我什至注意到，当变量值更改而忽略设置器时，也会发生冗余设置器调用——this.counterValue++例如。

我相信情况是这样的：

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

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

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

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

4

1 回答 1

1

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

当值由绑定设置时，更改检测会@Input()调用setter 。

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

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

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

decrement() {
  this.counter--;
  this.counterChange.emit(this.counterValue);
}
于 2017-11-12T21:01:27.867 回答