Angular mousemove以角度连续触发变化检测

我注意到某些元素上的mousemove会不断触发变化检测。我研究了这个问题，发现他们建议使用

NgZone

的

runOutsideAngular

方法

所以我试着

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

这根本不起作用

我是否误用了

runOutsideAngular

，或者是否有其他解决方法来防止mousemove事件上无休止的更改检测？如有任何见解，将不胜感激

编辑 对于注释问题：

由第三方库呈现的画布元素

一般用途：

您需要使用

呈现器：Renderer2

侦听器

请看这个

从'@angular/core'导入{Component，OnInit，OnDestroy，NgZone，renderr2，ViewChild，ElementRef}；
@组成部分({
选择器：“应用程序鼠标跟踪器”，
templateUrl:'./mouse tracker.component.html'，
样式URL:['./mouse tracker.component.css']
})
导出类MouseTrackerComponent实现OnInit、OnDestroy{
@ViewChild（'area'，{static:true}）area:ElementRef；
私听：功能；
构造函数（私有ngZone:ngZone，私有呈现器：Renderer2）{}
恩戈尼尼特（）{
此.ngZone.runOutsideAngular（（）=>{
this.unlisten=this.renderer.listen(
这个.area.nativeElement，
“mousemove”，
（）=>this.drawine（）
);
});
}
恩贡德斯特罗（）{
这是我的；
}
抽绳（）{
log（'画一条不需要绑定更新的线…'）；
}
getLabel（）：字符串{
log（'正在计算标签…'）；
返回“模范标签”；
}
}

和模板：

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

<div #area></div>

鼠标跟踪器工作正常

{{getLabel（）}}

谢谢您的回答。它在一个单独的纯元素中工作，但在我的例子中触发更改检测的是一个画布，它是由我正在使用的库创建的，所以我尝试了您的答案：

this.renderer.listen（this.el.nativeElement//container元素，它包含画布元素'mousemove'，（）=>{}）

但它不起作用：（有什么想法吗？

'mousemove'，（）=>{}

是向外倾斜的，在我们的示例中：this.drawLine（）是运行oustise angularI的函数，我不想在

mousemove

事件上执行任何操作。问题是容器元素上的每个mousemove都会触发更改检测，其中包含由第三方库呈现的canvas元素，因此我想知道是否可以阻止听到

mousemove

event或make Angular无法使用runOutsideAngular方法检测到

mousemove

事件。@DongBinKim

第三方库呈现的画布元素

，它必须是第三方函数，如：MyCanvaObject.draw（），然后，此函数将在外部运行。实际上，mousemove事件不应发生任何事情。它只是不断触发mousemove上的更改检测，这就是问题所在。

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

<div #area></div>