V AngularJS 1, ak chcete prepínať stav zobrazenia DOM prvkov, pravdepodobne použijete vstavané príkazy v AngularJS 1, ako ng-show alebo ng-hide:
Príklad AngularJS 1:
V Angular2 nová šablónová syntax umožňuje naviazať výrazy na akékoľvek natívne vlastnosti DOM prvkov. Táto absolútne úžasná funkcia otvára nekonečné možnosti. Jedným z nich je naviazanie výrazu na natívnu skrytú vlastnosť, ktorá je trochu ako ng-show, a tiež nastavuje zobrazenie: žiadne pre prvok:
[skrytý] príklad Angular2 (neodporúčané):
Na prvý pohľad sa zdá, že vyššie uvedený príklad je ng-show v AngularJS 1. Vlastne áno! dôležité rozdiely.
Ng-show aj ng-hide riadia stav zobrazenia DOM prvkov prostredníctvom CSS triedy ng-hide, ktorá jednoducho nastaví prvok na zobrazenie: žiadne. Kľúčové je, že AngularJS 1 bol pridaný do triedy ng-hide! dôležité, čo upravuje prioritu triedy tak, aby mohla prepísať priradenie atribútu zobrazenia elementu z iných štýlov.
Späť k tomuto príkladu, štýl display: none na natívnom skrytom atribúte je implementovaný prehliadačom. Väčšina prehliadačov ho nepoužíva! Je dôležité upraviť jeho prioritu. Preto môže byť ovládanie stavu zobrazenia prvku pomocou [hidden]="expression" ľahko neúmyselne prepísané inými štýlmi. Napríklad: ak takýto štýl napíšem pre tento prvok inde, display: flex, tento má prednosť pred natívnou skrytou vlastnosťou (pozri tu).
Z tohto dôvodu zvyčajne používame *ngIf na prepínanie stavu prítomnosti prvku, aby sme dosiahli rovnaký cieľ:
*ngIf príklad angular2 (odporúčané):
Na rozdiel od natívnej skrytej vlastnosti nie je *ngIf v angular2 štýlovo obmedzený. Nezáleží na tom, aký druh CSS napíšeš, je v bezpečí. Napriek tomu je potrebné spomenúť, že *ngIf nekontroluje stav zobrazenia prvku, ale priamo dosahuje efekt zobrazenia alebo nezobrazenia pridaním alebo odstránením prvku zo šablóny.
Samozrejme, môžete tiež pridať skrytú prioritu k skrytému atribútu prvku použitím globálneho štýlu, napríklad display: none !important, aby ste dosiahli tento efekt. Možno sa pýtate, keďže skupina Angular pozná tieto problémy, prečo jednoducho nepridať globálny najvyššiu prioritu skrytého štýlu k skrytému štýlu vo frameworku? Odpoveď je, že nemôžeme zaručiť, že pridanie globálnych štýlov je najlepšou voľbou pre všetky aplikácie. Keďže tento prístup skutočne narušuje funkcionalitu, ktorá závisí od natívnych skrytých schopností, nechávame voľbu na inžinieroch.
|
Zverejnené 22. 5. 2019 14:02:02
|
|
|
