Angular 2:ChangeDetection和mousemove事件

Question

我有一个Angular 2组件,有很多孩子.由于性能问题,我想检查ChangeDetection检查我的子组件的频率.所以我记录了我的一个子组件的ngAfterViewChecked -callback.

我意识到我的父组件有一个mousemove()- callback,所以每当我将鼠标移到父母上时,我的孩子的ngAfterViewChecked就会被调用.但是我没有更新mousemove()- callback中的任何组件变量.为什么ChangeDetection会为孩子们运行,我该如何阻止它？

希望你们明白这个问题(如果没有请注释,这样我就可以清楚了解问题).谢谢你的帮助!

Answer 1

提供的网站peeskillet显示了如何从ChangeDetection中排除eventlistener:

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');
  }
}

有关详细信息,我可以推荐这篇文章.peeskillet的大THX!