Angular 2コンポーネントに多くの子があります。パフォーマンスの問題のため、ChangeDetection
が子コンポーネントをチェックする頻度を確認したかったのでngAfterViewChecked
-私の子コンポーネントの1つのコールバック。
親コンポーネントにmousemove()
-コールバックがあることに気付いたので、マウスを親の上に移動するたびに、子のngAfterViewChecked
が呼び出されます。しかし、mousemove()
-コールバックのコンポーネント変数は更新していません。なぜ子供たちのためにChangeDetection
が実行されているのですか?どうすればこれを止めることができますか?
問題をご理解いただければ幸いです(コメントがない場合は、明確にさせていただきます)。
提供されているサイト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に!