我想按照本教程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++之类的东西。

我相信这种情况是这样的:


组件通过发送事件通知观察者有关更改的信息;
观察者更改了“ bonded”变量,并通知该变量在其一侧已更改;
初始组件接收变量已更改的信息,然后尝试将变量更改为相同的值。


积极的是,它不会永远这样下去。
我认为,第三点仍然不应该发生。

我显然可以使用简单的if(this.counterValue !== val),但这似乎并不是解决此问题的一种优雅方法。我认为,不应首先进行多余的呼叫。

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

最佳答案

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

通过绑定设置值时,更改检测将调用@Input()设置器。

这会中断单向数据流,因为通过this.counterChange.emit(this.counterValue);通过更改检测传播到子级的父级更改会传播回父级。

您应该重新考虑您的体系结构。按钮上的click事件应该更新模型,而不是更改模型来更改模型。

将发出事件的代码移至事件处理程序,应该对其进行修复

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

07-24 09:47
查看更多