Question

我在angular2项目中使用了Jquery插件。如果插件包含$(window).mousemove()或setInterval(function(){}, 10)等事件，则会出现严重的性能问题。由于zone.js具有与html事件的挂钩，因此页面始终检查数据更改。我的cpu运行得非常高。

Answer 1

你可以使用

@HostListener('mousemove', ['$event'])
  onMousemove(event: MouseEvent) { this.mousemove.emit(event); }

代替$(window).mousemove()

会提高你的表现

Answer 2

您可以使用NgZone使代码在Angulars区域内部或外部运行。

外部出于性能原因，在内部确保Angular得到通知，当组件，模型或服务的属性被修改时，必须运行更改检测：

constructor(private zone:NgZone) {
  zone.runOutsideAngular(() => {
    $(window).mousemove()...;
    setInterval(() => {}, 10);
  })
}

onMouseMove() {
  this.zone.run(() => {
    this.someProp = 'someValue';
    this.router.navigate(....)
  });
}

angular2事件导致检查数据更改

2 个答案: