2

我有一个大型数组，我在一个组件（组件 A）中使用*ngFor了一个嵌套的*ngFor.

组件 B 初始化一个注册文档mousemove事件处理程序的 jquery 插件，我正在使用this.zone.runOutsideAngular它来初始化插件，并且我this.ref.detectChanges()在回调中调用，因为我需要更新mousemove组件 B 内部的UI。

组件 A 不是组件 B 的子组件。

一旦组件 A 被渲染，变更检测就会变得非常缓慢。数组没有改变，我正在使用ChangeDetectionStrategy.OnPush组件 A 的策略，但是当我ref.detectChanges()在组件 B 内部触发时，ngDoCheck在组件 A 上被调用，我可以看到mousemove.

有没有办法告诉 Angular 完全忽略组件 A 中的大量项目并允许我处理何时应该更新 UI？我认为 usingChangeDetectionStrategy.OnPush会给我我需要的东西，但我已经尝试@Input()从组件 A 中删除所有 s 并且任何时候我this.ref.detectChanges()在组件 B 内部调用它仍然在触发ngDoCheck，很明显这很慢。

我可以滚动浏览项目列表没有问题，但是当我触发组件 B 的detectChanges内部mousemove时会导致问题。我知道我可以手动更新 DOM，但我认为这只是一种解决方法，因为它只会解决 mousemove 上的卡顿，而不是围绕更改检测缓慢的问题。

4

2 回答 2

2

我已经深入了解了这个问题。

问题是在嵌套 *ngFor 的组件 A 内部，我使用子组件来呈现每个子项，这意味着尽管我使用了 ChangeDetectionStrategy.OnPush 策略，但它仍然需要对每个项进行 ref 检查。

我现在已经将 html 从子组件直接移动到组件 A 中，这对性能产生了巨大影响。

于 2018-03-23T11:49:39.923 回答
1

this.ref.detach()从树上完全移除检测器，这应该停止检查。然后您仍然可以调用detectChanges手动操作，reattach并将其重新联机。

除非您真的需要跟踪每个鼠标移动，否则可能还对鼠标移动进行去抖动（rxjs debounceTime()）可能会有所帮助？

如果您还没有进行一项优化，请添加trackBy: yourTrackByFn到 ngFor(s)。

于 2018-03-23T11:38:40.153 回答