web-dev-qa-db-ja.com

Angular 2：ChangeDetectionおよびmousemoveイベント

Angular 2コンポーネントに多くの子があります。パフォーマンスの問題のため、ChangeDetectionが子コンポーネントをチェックする頻度を確認したかったのでngAfterViewChecked-私の子コンポーネントの1つのコールバック。

親コンポーネントにmousemove()-コールバックがあることに気付いたので、マウスを親の上に移動するたびに、子のngAfterViewCheckedが呼び出されます。しかし、mousemove()-コールバックのコンポーネント変数は更新していません。なぜ子供たちのためにChangeDetectionが実行されているのですか？どうすればこれを止めることができますか？

問題をご理解いただければ幸いです（コメントがない場合は、明確にさせていただきます）。

angulardom-eventsangular2-changedetection
9
ant45de

提供されているサイト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');
  }
}

詳細については、これをお勧めします 記事 。大きいTHX peeskilletに！

8
ant45de