En AngularJS 1, si quieres cambiar el estado de visualización de los elementos del DOM, probablemente usarás los comandos integrados en AngularJS 1, como ng-show o ng-hide:
Ejemplo de AngularJS 1:
En angular2, la nueva sintaxis de la plantilla permite vincular expresiones a cualquier propiedad nativa de los elementos DOM. Esta función absolutamente increíble abre infinitas posibilidades. Una de ellas es vincular la expresión a la propiedad oculta nativa, que es un poco como ng-show, y también establece display: none para el elemento:
[Ejemplo oculto] de Angular2 (no recomendado):
A primera vista, el ejemplo anterior parece ser ng-show en AngularJS 1. ¡De hecho, sí! Diferencias importantes.
Tanto ng-show como ng-hide controlan el estado de visualización de los elementos DOM mediante una clase CSS llamada ng-hide, que simplemente establece el elemento para mostrar: ninguno. La clave aquí es que AngularJS 1 se ha añadido a la clase ng-hide. importante, que ajusta la prioridad de la clase para que pueda anular la asignación del atributo de visualización del elemento desde otros estilos.
Volviendo a este ejemplo, el estilo display: none en el atributo oculto nativo es implementado por el navegador. ¡La mayoría de los navegadores no lo usan! Es importante ajustar su prioridad. Por lo tanto, controlar el estado de visualización de un elemento usando [hidden]="expression" puede ser fácilmente sobreescrito accidentalmente por otros estilos. Por ejemplo: si escribo tal estilo para este elemento en otro lugar, display: flex, esto tiene prioridad sobre la propiedad oculta nativa (ver aquí).
Por esta razón, normalmente usamos *ngIf para alternar el estado de presencia del elemento y lograr el mismo objetivo:
*ngIf ejemplo de angular2 (recomendado):
A diferencia de la propiedad oculta nativa, *ngIf en angular2 no está restringida por estilo. No importa qué tipo de CSS escribas, ella está a salvo. Sin embargo, sigue siendo necesario mencionar que *ngIf no controla el estado de visualización del elemento, sino que consigue directamente el efecto de mostrar o no añadiendo o eliminando el elemento de la plantilla.
Por supuesto, también puedes añadir una prioridad oculta al atributo oculto de un elemento usando un estilo global, como display: non!important, para lograr este efecto. Quizá te preguntes, dado que el grupo angular conoce estos problemas, ¿por qué no añadir simplemente un estilo oculto de máxima prioridad global al oculto en el framework? La respuesta es que no podemos garantizar que añadir estilos globales sea la mejor opción para todas las aplicaciones. Como este enfoque en realidad rompe la funcionalidad que depende de capacidades ocultas nativas, dejamos la elección a los ingenieros.
|
Publicado en 22/5/2019 14:02:02
|
|
|
