V AngularJS 1, če želite preklopiti stanje prikaza DOM elementov, boste verjetno uporabili vgrajene ukaze v AngularJS 1, kot sta ng-show ali ng-hide:
Primer AngularJS 1:
V Angular2 nova sintaksa predloge omogoča vezavo izrazov na katerokoli izvorno lastnost DOM elementov. Ta izjemno odlična funkcija odpira neskončne možnosti. Ena od njih je, da izraz vežemo na izvorno skrito lastnost, kar je podobno kot ng-show, in prav tako postavi display: none za element:
[skrit] primer angular2 (ni priporočljiv):
Na prvi pogled se zdi, da je zgornji primer ng-show v AngularJS 1. Pravzaprav so! pomembne razlike.
Tako ng-show kot ng-hide nadzorujeta stanje prikaza DOM elementov preko CSS razreda, imenovanega ng-hide, ki preprosto nastavi element na display: none. Ključno je, da je AngularJS 1 dodan razredu ng-hide! pomembno, ki prilagaja prioriteto razreda tako, da lahko preglasi dodelitev prikaznega atributa elementa iz drugih slogov.
Nazaj k temu primeru, slog display: none na nativnem skritem atributu ni implementiran v brskalniku. Večina brskalnikov tega ne uporablja! Pomembno je prilagoditi njegovo prioriteto. Zato se lahko nadzor stanja prikaza elementa z uporabo [hidden]="izraz" zlahka po nesreči prepiše z drugimi slogi. Na primer: če tak slog za ta element napišem drugje, display: flex, ima ta prednost pred izvorno skrito lastnostjo (glej tukaj).
Zaradi tega običajno uporabljamo *ngIf za preklop stanja prisotnosti elementa, da dosežemo isti cilj:
*ngIf primer angle2 (priporočeno):
Za razliko od nativne skrite lastnosti *ngIf v angular2 ni omejen s slogom. Ne glede na to, kakšen CSS napišeš, je varna. Kljub temu je treba omeniti, da *ngIf ne nadzoruje stanja prikaza elementa, temveč neposredno doseže učinek prikaza ali neprikaza z dodajanjem ali odstranjevanjem elementa iz predloge.
Seveda lahko skrito prednost skritemu atributu elementa dodate tudi z uporabo globalnega sloga, kot je display: none !important, da dosežete ta učinek. Morda se sprašujete, ker skupina Angular pozna te težave, zakaj ne bi preprosto dodali globalnega skritega sloga z najvišjo prioriteto k skritemu slogu v ogrodju? Odgovor je, da ne moremo zagotoviti, da je dodajanje globalnih slogov najboljša izbira za vse aplikacije. Ker ta pristop dejansko pokvari funkcionalnost, ki temelji na nativnih skritih zmogljivostih, prepuščamo izbiro inženirjem.
|
Objavljeno na 22. 05. 2019 14:02:02
|
|
|
