Angular 2：ChangeDetection 和 mousemove 事件

Question

我有一个 Angular 2 组件，其中有很多 children。由于性能问题，我想检查 ChangeDetection 检查我的 child-components 的频率。所以我记录了我的 child-components 之一的 ngAfterViewChecked-回调。

我意识到我的 parent-component 有一个 mousemove() 回调，所以每次我将鼠标移到 [=29] 上时我的 childrens ngAfterViewChecked 都会被调用=].但是我没有更新 mousemove()-回调中的任何组件变量。为什么 ChangeDetection 运行对应 children 那么我该如何停止呢？

希望您能理解问题所在（如果不理解请发表评论，以便我澄清问题）。

Answer 1

提供的站点 peeskillet 显示了如何从 ChangeDetection 中排除事件监听器：

import { Component, NgZone } from '@angular/core';

@Component(...)
export class AppComponent {
...
  element: HTMLElement;

  constructor(private zone: NgZone) {}

  mouseDown(event) {
  ...
    this.element = event.target;

    this.zone.runOutsideAngular(() => {
      window.document.addEventListener('mousemove', this.mouseMove.bind(this));
    });
  }

  mouseMove(event) {
    event.preventDefault();
    this.element.setAttribute('x', event.clientX + this.clientX + 'px');
    this.element.setAttribute('y', event.clientX + this.clientY + 'px');
  }
}

有关更多信息，我真的可以推荐这个 article。非常感谢 peeskillet！

Angular 2：ChangeDetection 和 mousemove 事件

Angular 2: ChangeDetection and mousemove event

dom-events

angular2-changedetection

angular