No AngularJS 1, se você quiser alternar o estado de exibição dos elementos do DOM, provavelmente usará os comandos integrados no AngularJS 1, como ng-show ou ng-hide:
Exemplo do AngularJS 1:
No angular2, a nova sintaxe do template permite vincular expressões a quaisquer propriedades nativas dos elementos do DOM. Esse recurso absolutamente incrível abre possibilidades infinitas. Uma delas é vincular a expressão à propriedade oculta nativa, que é um pouco como ng-show, e também define display: none para o elemento:
[Exemplo oculto] de Angular2 (não recomendado):
À primeira vista, o exemplo acima parece ser ng-show no AngularJS 1. Na verdade, já se fizeram! diferenças importantes.
Tanto ng-show quanto ng-hide controlam o estado de exibição dos elementos DOM por meio de uma classe CSS chamada ng-hide, que simplesmente define o elemento para exibir: none. O ponto chave aqui é que o AngularJS 1 foi adicionado à classe ng-hide! importante, que ajusta a prioridade da classe para que ela possa sobrescrever a atribuição do atributo de exibição do elemento de outros estilos.
Voltando a este exemplo, o estilo display: none no atributo oculto nativo é implementado pelo navegador. A maioria dos navegadores não usa! é importante ajustar sua prioridade. Portanto, controlar o estado de exibição de um elemento usando [hidden]="expression" pode facilmente ser acidentalmente sobrescrito por outros estilos. Por exemplo: se eu escrever tal estilo para esse elemento em outro lugar, display: flex, isso tem precedência sobre a propriedade oculta nativa (veja aqui).
Por essa razão, geralmente usamos *ngIf para alternar o estado de presença do elemento e alcançar o mesmo objetivo:
*ngIf exemplo de angular2 (recomendado):
Diferente da propriedade oculta nativa, *ngIf em angular2 não é restrito por estilo. Não importa que tipo de CSS você escreva, ela está segura. No entanto, ainda é necessário mencionar que *ngIf não controla o estado de exibição do elemento, mas alcança diretamente o efeito de exibir ou não ao adicionar/remover o elemento do template.
Claro, você também pode adicionar uma prioridade oculta ao atributo oculto de um elemento usando um estilo global, como display: non!important, para alcançar esse efeito. Você pode perguntar, já que o grupo angular conhece esses problemas, por que não simplesmente adicionar um estilo oculto global de maior prioridade ao oculto no framework? A resposta é que não podemos garantir que adicionar estilos globais seja a melhor escolha para todas as aplicações. Como essa abordagem realmente quebra a funcionalidade que depende de capacidades ocultas nativas, deixamos a escolha para os engenheiros.
|
Publicado em 22/05/2019 14:02:02
|
|
|
