V AngularJS 1, pokud chcete přepínat stav zobrazení prvků DOM, pravděpodobně použijete vestavěné příkazy v AngularJS 1, jako jsou ng-show nebo ng-hide:
Příklad AngularJS 1:
V Angular2 nová šablonová syntax umožňuje vázat výrazy na jakékoli nativní vlastnosti DOM prvků. Tato naprosto úžasná funkce otevírá nekonečné možnosti. Jedním z nich je navázat výraz na nativní skrytou vlastnost, což je trochu jako ng-show, a také nastavuje zobrazovat: none pro prvek:
[skrytý] příklad angular2 (nedoporučováno):
Na první pohled se výše uvedený příklad zdá být ng-show v AngularJS 1. Ve skutečnosti ano! důležité rozdíly.
Obě složky, ng-show i ng-hide, ovládají stav zobrazení prvků DOM prostřednictvím třídy CSS nazvané ng-hide, která jednoduše nastaví prvek na zobrazení: žádné. Klíčové je, že do třídy ng-hide byl přidán AngularJS 1! důležité, což upravuje prioritu třídy tak, aby mohla přepsat přiřazení atributu zobrazení prvku z jiných stylů.
Zpět k tomuto příkladu, styl display: none na nativním skrytém atributu není implementován prohlížečem. Většina prohlížečů ho nepoužívá! Je důležité upravit jeho prioritu. Proto může být ovládání stavu zobrazení prvku pomocí [hidden]="expression" snadno neúmyslně přepsáno jinými styly. Například: pokud takový styl pro tento prvek napíšu jinde, display: flex, má to přednost před nativní skrytou vlastností (viz zde).
Z tohoto důvodu obvykle používáme *ngIf k přepnutí stavu přítomnosti prvku pro dosažení stejného cíle:
*ngIf příklad angular2 (doporučeno):
Na rozdíl od nativní skryté vlastnosti není *ngIf v angular2 stylově omezený. Ať už napíšete jakýkoli druh CSS, je v bezpečí. Je však stále nutné zmínit, že *ngIf neřídí stav zobrazení prvku, ale přímo dosahuje efektu zobrazení nebo nezobrazení přidáním nebo odstraněním prvku ze šablony.
Samozřejmě můžete také přidat skrytou prioritu k skrytému atributu prvku pomocí globálního stylu, například display: none !important, abyste tohoto efektu dosáhli. Možná se ptáte, když skupina Angular tyto problémy zná, proč prostě nepřidat globální nejvyšší prioritu skrytého stylu do skrytého ve frameworku? Odpověď je, že nemůžeme zaručit, že přidání globálních stylů je nejlepší volbou pro všechny aplikace. Protože tento přístup skutečně narušuje funkcionalitu závislou na nativních skrytých schopnostech, necháváme volbu na inženýrech.
|
Zveřejněno 22.05.2019 14:02:02
|
|
|
