Tengo un Componente Angular 2 con muchos hijos. Debido a problemas de rendimiento, quería verificar con qué frecuencia ChangeDetection verifica mis componentes secundarios. Así que registré la devolución de ngAfterViewChecked de uno de mis componentes secundarios.
Me di cuenta de que mi componente principal tiene una devolución de mousemove() y, por lo tanto, se llama a ngAfterViewChecked de mis hijos cada vez que muevo el mouse sobre el elemento principal. Pero no estoy actualizando ninguna variable de componente en mi mousemove() -callback. ¿Por qué se ejecuta ChangeDetection para los niños y cómo puedo detener esto?
Espero que entiendas el problema (si no, por favor comenta, así puedo aclarar las cosas).
El peeskillet del sitio proporcionado muestra cómo excluir eventlistener de 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'); } }Para más información realmente puedo recomendar este artículo . ¡Grandes THX a peeskillet!