0
222
Views¿Qué hace la animación angular después de crear una vista y cómo evitarla?
Tengo una vista muy grande y compleja configurada por un cliente. Por lo tanto, no puedo hacerlo más fácil, pero quiero hacer todo lo posible para que funcione mejor y se cargue más rápido. Estoy comparando la vista en este momento y tengo un gran bloque que no entiendo.
La siguiente imagen muestra el problema. El lado izquierdo es la creación de vistas, este es mi trabajo para mejorar el rendimiento. Pero el lado derecho es animación angular. Son muchas llamadas a _balanceNamespaceList, donde angular hace algo que no entiendo. Cuando se crea la vista, no hay animación involucrada. Tengo algunas animaciones para menús desplegables y cuadros de diálogo, etc., que solo se representan cuando se abren, por lo que están dentro de un *ngIf.
Por lo tanto, me gustaría entender qué tengo que hacer para mejorar eso. He desactivado la animación angular y esto ayuda, pero me gustaría mantener mis animaciones.
1 answers
Answer question0
Todavía no tengo idea de qué hace el código angular, pero sé qué "causa" el problema. Para cada nuevo componente en su árbol, que tiene animaciones, angular hace este equilibrio. No importa dónde se usen las animaciones, sino que el componente tenga la suya en la declaración, por ejemplo, con
@Component({ animations: [ fadeAnimation ] })Si la animación se usa dentro de una directiva estructural (p. ej., *ngIf, *ngSwitch, etc.), puede optimizarla introduciendo un nuevo componente. Si a menudo hace que su código sea más limpio de todos modos, pero también tengo un caso extraño, en el que tengo que dividir un componente muy pequeño en dos: el siguiente componente muestra mensajes de error para los campos.
<div class="errors-container" *ngIf="snapshot.errorMessages.length > 0" @fade> <div class="errors"> <ng-container *ngFor="let message of snapshot.errorMessages"> {{message}} </ng-container> </div> </div>Tuve que dividir el mensaje de error en un componente anidado para mejorar el rendimiento:
<sqx-errors-messages [errorMessages]="snapshot.errorMessages" *ngIf="snapshot.errorMessages.length > 0"></sqx-errors-messages>