În AngularJS 1, dacă vrei să comutezi starea de afișare a elementelor DOM, probabil vei folosi comenzile încorporate în AngularJS 1, cum ar fi ng-show sau ng-hide:
Exemplu AngularJS 1:
În angular2, noua sintaxă șablon îți permite să legi expresii la orice proprietăți native ale elementelor DOM. Această funcție absolut extraordinară deschide posibilități nesfârșite. Unul dintre ele este să lege expresia de proprietatea ascunsă nativă, care seamănă puțin cu ng-show, și setează de asemenea display: none pentru elementul:
[Exemplu ascuns] de Angular2 (nu recomandat):
La prima vedere, exemplul de mai sus pare să fie ng-show în AngularJS 1. De fapt, au făcut-o! Diferențe importante.
Atât ng-show, cât și ng-hide controlează starea de afișare a elementelor DOM printr-o clasă CSS numită ng-hide, care setează pur și simplu elementul să afișeze: none. Cheia aici este că AngularJS 1 a fost adăugat la clasa ng-hide! important, care ajustează prioritatea clasei astfel încât să poată suprascrie atribuirea atributului de afișare al elementului din alte stiluri.
Revenind la acest exemplu, stilul display: none pe atributul ascuns nativ este implementat de browser. Majoritatea browserelor nu îl folosesc! Este important să-i ajustezi prioritatea. Prin urmare, controlul stării de afișare al unui element folosind [hidden]="expression" poate fi ușor suprascris accidental de alte stiluri. De exemplu: dacă scriu un astfel de stil pentru acest element în altă parte, display: flex, aceasta are prioritate față de proprietatea ascunsă nativă (vezi aici).
Din acest motiv, de obicei folosim *ngIf pentru a comuta starea de prezență a elementului pentru a atinge același scop:
*ngIf exemplu de angular2 (recomandat):
Spre deosebire de proprietatea ocultă nativă, *ngIf din angular2 nu este constrâns de stil. Indiferent ce fel de CSS scrii, ea este în siguranță. Totuși, este totuși necesar să menționăm că *ngIf nu controlează starea de afișare a elementului, ci obține direct efectul de afișare sau nu prin adăugarea/eliminarea elementului din șablon.
Desigur, poți adăuga și o prioritate ascunsă atributului ascuns al unui element folosind un stil global, cum ar fi display: none !important, pentru a obține acest efect. Poate vă întrebați, deoarece grupul unghiular cunoaște aceste probleme, de ce să nu adăugați pur și simplu un stil global cu cea mai mare prioritate ascunsă la ascuns din framework? Răspunsul este că nu putem garanta că adăugarea de stiluri globale este cea mai bună alegere pentru toate aplicațiile. Pentru că această abordare întrerupe funcționalitatea care se bazează pe capabilități ascunse native, lăsăm alegerea inginerilor.
|
Postat pe 22.05.2019 14:02:02
|
|
|
