性能：使用@Input和getters / setters的两种方式的数据绑定

Question

我已将组件拆分为子组件，以尝试从某些组件中获得可重用性。我的组件之一被拆分为3个组件，现在它们被用作嵌套的子组件：

Page component (with a service)
- Widget component (Passing in an object using @Input)
  -Settings component (Passing in an Object using @Input with getter/setter and EventEmitter)
   - General Settings component (Passing in a variable of type string from the parent object using @Input with getter/setter and EventEmitter)
    -Input (bound using ngModel)

以下stackblitz来自以下stackoverflow问题。

在我的特定项目中，我发现使用getters / setters进行组件链的双向绑定非常麻烦，以至于需要关闭浏览器窗口。

从尝试调查问题开始，我注意到当我更改输入字段中的值时，吸气剂会不断被激发。在get块中添加console.log时，您会看到此信息。

我的问题是是否有一种方法可以解决此问题，或者我是否误解了自定义组件中的双向数据绑定应该起作用的方式？

注意：我尝试使用Chrome开发控制台中的“效果”标签，但是我不知道如何解释结果。得出的结论是它与不断被调用的吸气剂有关，这仅仅是试错法。

Answer 1

您的问题是因为您正在设置器内部触发事件发送器，所以创建了双向绑定反馈循环。

事件发射器更新父组件，并将新值反馈到设置器中。