navigationend - Fugas de memoria en Angular2
navigationend angular 4 (2)
¿Qué puede causar pérdidas de memoria en la aplicación Angular2 (rc5)? ¿Cómo prevenirlos?
Los ejemplos de código incorrecto / correcto serían muy apreciados.
El aspecto de suscripción y cancelación de la suscripción que mencionó votes es ciertamente la precaución número 1 que debemos tener en cuenta para evitar la pérdida de memoria.
Para comprender mejor algunas de las técnicas de administración de memoria, puede consultar Administración de memoria en aplicaciones angulares . (Señala que puede encontrar exactamente el mismo artículo en varios sitios. ¿Problema de copyright aquí y allá?)
Hay una cosa que me gustaría decir sobre los "oyentes del evento" en particular. En un proyecto reciente que he hecho, uso emisores y escuchas de eventos para componentes secundarios para hablar con los componentes principales. Me atengo especialmente a una regla:
Los componentes principales solo escuchan los componentes secundarios DIRECTOS.
Aquí, los componentes principales actúan como componentes de contenedor y los componentes secundarios actúan como componentes de presentación.
De esta manera puedo asegurarme de que siempre que elimine un componente secundario, solo hay un lugar, que es el padre directo, para eliminar a todos sus oyentes. Hasta ahora, esta regla funciona bastante bien para mí.
En el navegador, Angular es solo JavaScript, por lo que se aplican las advertencias típicas.
Una cosa contra la que Angular advierte específicamente es que es observable. Una vez que se suscriba a uno, seguirá funcionando hasta que cancele la suscripción, incluso si navega a otra vista. Angular anula la suscripción para usted siempre que sea posible (por ejemplo, si utiliza el conducto async en la plantilla:
modelo
//listenToServer returns an observable that keeps emitting updates
serverMsgs = httpService.listenToServer();
modelo
<div>{{serverMsgs | async}}</div>
Angular mostrará los mensajes del servidor en el div, pero finalizará la suscripción cuando salga.
Sin embargo, si se suscribe, también debe darse de baja:
modelo
msgs$ = httpService.listenToServer().subscribe(
msg => {this.serverMsgs.push(msg); console.log(msg)}
);
modelo
<div *ngFor="let msg of serverMsgs">{{msg}}</div>
Cuando navegue lejos, aunque no pueda ver aparecer nuevos mensajes en la vista, los verá impresos en la consola a medida que vayan llegando. Para cancelar la suscripción cuando se elimine el componente, debe hacer lo siguiente:
ngOnDestroy(){ this.msgs$.unsubscribe(); }
Debemos cancelar la suscripción antes de que Angular destruya el componente. De lo contrario podría crear una pérdida de memoria.