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

有关详细信息，我真的可以推荐这个article。 Peeskillet的大THX！

Angular 2：ChangeDetection和mousemove事件

1 个答案: