En nuestra aplicación Angular, código dado como el siguiente:
<div>{{ aGetProperty }}</div> <div>{{ aMethod() }}</div>Cada vez que hago clic en cualquier parte de la página, estas expresiones se evalúan varias veces. Es decir, si coloco un archivo console.log('hello') en aMethod, cada vez que presiono el botón izquierdo o derecho del mouse, hello se envía a la consola varias veces y nuevamente varias veces con el mouse hacia arriba.
¿Alguien sabe qué podría estar causando este problema? No he vinculado ningún evento de clic, arriba / abajo del mouse para el componente ni nada por encima de él (hasta donde puedo decir). Gracias.
Angular en realidad parchea la API de bajo nivel de los navegadores: por ejemplo, addEventListener está parcheado para verificar cambios en DOM y volver a representar la vista. Por lo tanto, cuando haga clic en los elementos DOM, Angular ejecutará la detección de cambios y se ejecutarán las llamadas a su método en DOM. En otras palabras: es una mala práctica vincular métodos de DOM, a menos que sea explícitamente un evento de activación/clic, porque el método se ejecutará en cada detección de cambio en el ciclo de vida. Por supuesto, a veces querrás que algunos de tus métodos se activen con cada cambio, pero asegúrate de que eso es exactamente lo que quieres.