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 回答