亲爱的Angular 2开发人员,

我和我的团队在角度2应用程序(2.1.1)中遇到了一个奇怪的性能问题 . 我们正在使用基于golden-layout.js(https://golden-layout.com/)的停靠布局 . 它运行得非常好,拖放动作也很流畅 .

然而,当我们有很多角度组件时(比方说,一个带有大约2500个元素的* ngFor,每个元素都是一个带有2个属性绑定的简单组件),黄金布局的行为很奇怪:当我们点击角度组件然后开始拖动,拖动动作呈现出巨大的尖峰 . 但是,当我们单击浏览器中的空白区域(不在任何角度组件的HTML上)然后开始拖动时,动画将平稳运行 .

我们所有的组件都使用ChangeDetectionStrategy.OnPush,并且在可能的情况下,分离ChangeDetectors并手动触发更新 . 当这个聚焦元素是一个角度分量时,我们怀疑有角度可以保留内存中最后一个聚焦的元素,并执行大量的更新动画 .

有什么想法可能来自这个问题或我们应该搜索什么?因为当我们点击任何角度组件的外部时,我们看到渲染确实正常工作,所以必须有一个原因,但我们无法想到正确诊断问题的方法 .

谢谢你的帮助 .

编辑:我创建了一个plunkr

placeholder (sorry, cannot just post relevant portion)

这种现象可以再现如下:

Initial state :拖动任何简单组件 . 动画应该很流畅 . Spikes :在Complex组件(包含5000个元素)内单击 . 然后拖动 . 动画应该用很少的帧渲染 . Fix :双击任意简单组件,然后单击一下,然后再次尝试拖动 . 动画应该再次平滑 .

修复也可以通过在简单组件中随机点击来实现,我们还没有弄清楚整个事情背后的逻辑 . 但是,双击然后单击即可(至少在几台64位Windows 10计算机上的最新Chrome中) .