鼠标移动在 Angular 中连续触发更改检测

Question

我注意到某些元素上的鼠标移动触发器会不断更改检测。我研究了这个问题，发现他们建议使用runOutsideAngularNgZone方法。

所以我试着像，

this.zone.runOutsideAngular(() => {
this.element.addEventListener('mousemove', {});
});

这根本不起作用。

我是否误用了runOutsideAngular或者是否有任何其他解决方法可以防止鼠标移动事件上的无休止更改检测？任何见解将不胜感激！

Answer 1

@EDIT 对于评论问题：the canvas element rendered by a third party library

阅读此内容

对于一般用途：

您需要使用renderer: Renderer2侦听器。

请阅读本文

import { Component, OnInit, OnDestroy, NgZone, Renderer2, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-mouse-tracker',
templateUrl: './mouse-tracker.component.html',
styleUrls: ['./mouse-tracker.component.css']
})
export class MouseTrackerComponent implements OnInit, OnDestroy {
@ViewChild('area', { static: true }) area: ElementRef<HTMLDivElement>;
private unlisten: Function;
constructor(private ngZone: NgZone, private renderer: Renderer2) { }
ngOnInit() {
this.ngZone.runOutsideAngular(() => {
this.unlisten = this.renderer.listen(
this.area.nativeElement,
'mousemove',
() => this.drawLine()
);
});
}
ngOnDestroy() {
this.unlisten();
}
drawLine() {
console.log('Drawing a line which does not require bindings update...');
}
getLabel(): string {
console.log('Label is being computed...');
return 'exemplary label';
}
}

和模板：

<p>mouse-tracker works!</p>
<p>{{ getLabel() }}</p>
<div #area></div>

Answer 2

当用户拖动对话框窗口时，我遇到了这个问题。

解决方案是注入ChangeDetectorRef并调用detach()onMouseDown和reattach()onMouseUp