Angular 2 : ChangeDetection and mousemove event

Question

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

我意识到我的父组件有一个 mousemove() 回调，所以每次我将鼠标移到父组件上时，我的子组件 ngAfterViewChecked 都会被调用。但我没有更新我的 mousemove() 回调中的任何组件变量。为什么 ChangeDetection 会为 child 运行，我该如何停止？

我希望你理解这个问题(如果不理解请发表评论，这样我就可以澄清问题)。

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!