性能:使用 @Input 和 getter/setter 的双向数据绑定



我已经将我的组件拆分为子组件,以尝试从某些组件中获得可重义性。我的一个组件已被拆分为 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)

以下堆栈闪电战来自以下堆栈溢出问题。

在我的特定项目中,我发现使用 getter/setter 来执行组件链的双向绑定非常繁重,以至于需要关闭浏览器窗口。

在尝试调查问题的过程中,我注意到当我更改输入字段中的值时,getter 会不断被解雇。您可以在添加控制台时看到这一点.log在 get 块中。

我的问题是是否有办法克服这个问题,或者我是否误解了自定义组件中的双向数据绑定应该工作的方式?

注意:我尝试使用Chrome开发控制台中的"性能"选项卡,但我不知道如何解释结果。得出的结论是,它与连续调用的getter有关,这只是通过反复试验得出的。

您的问题是因为您在 setter 内部触发事件发射器,您已经创建了一个双向绑定反馈循环。

事件发射器更新父组件,新值将反馈到资源库。

最新更新