Az AngularJS 1-ben, ha a DOM elemek megjelenítési állapotát szeretnéd váltani, valószínűleg az AngularJS 1 beépített parancsait fogod használni, például ng-show vagy ng-hide módot:
AngularJS 1 példa:
Az angular2-ben az új sablonszintaxis lehetővé teszi, hogy kifejezéseket kötsünk a DOM elemek bármely natív tulajdonságához. Ez a fantasztikus funkció végtelen lehetőségeket nyit meg. Az egyik az, hogy az kifejezést a natív rejtett tulajdonsághoz kötjük, ami kicsit hasonlít az ng-show-ra, és beállítja a display-t: nincs az elemre:
[rejtett] Angular2 példa (nem ajánlott):
Első pillantásra a fenti példa az AngularJS 1-ben tűnt ng-shownak. Valójában igen! fontos különbségek.
Mind ng-show, mind ng-hide irányítja a DOM elemek megjelenítési állapotát egy ng-hide nevű CSS osztályon keresztül, amely egyszerűen úgy állítja be az elemet, hogy megjelenítse a funkciót: none. A kulcs az, hogy az AngularJS 1 is bekerült az ng-hide osztályba! fontos, amely módosítja az osztály prioritását, hogy felülírja az elem megjelenítő attribútumának más stílusokból való kiosztását.
Visszatérve ehhez a példához: a display: none stílust a natív rejtett attribútumon a böngésző valósította meg. A legtöbb böngésző nem használja! Fontos, hogy a prioritását módosítsák. Ezért egy elem megjelenítési állapotának vezérlése [hidden]="expression" használatával könnyen felülírható más stílusok által. Például: ha máshol írok ilyen stílust erre az elemre, display: flex, ez elsőbbséget élvez a natív rejtett tulajdonsággal szemben (lásd itt).
Ezért általában *ngIf segítségével kapcsoljuk az elem jelenléti állapotát ugyanazon cél eléréséhez:
*ngIf példa az angular2-re (ajánlott):
Ellentétben a natív rejtett tulajdonsággal, az *ngIf az angular2-ben nem stíluskorlátozott. Akármilyen CSS-t írsz, ő biztonságban van. Ugyanakkor fontos megemlíteni, hogy a *ngIf nem irányítja az elem megjelenítési állapotát, hanem közvetlenül az elem hozzáadásával/eltávolításával éri el a megjelenítés vagy megjelenítés hatását.
Természetesen egy elem rejtett attribútumjához is hozzáadhatsz egy rejtett prioritást globális stílussal, például display: none !important, hogy ezt a hatást elérje. Kérdezheted, hogy mivel az angular csoport ismeri ezeket a problémákat, miért ne adnánk egy globális, legmagasabb prioritású rejtett stílust a keretrendszerben lévő rejtett stílushoz? A válasz az, hogy nem garantálhatjuk, hogy a globális stílusok hozzáadása minden alkalmazáshoz a legjobb választás. Mivel ez a megközelítés valójában megtöri azt a funkcionalit, amely a natív rejtett képességekre támaszkodik, a döntést a mérnökökre bízzuk.
|
Közzétéve 2019. 05. 22. 14:02:02
|
|
|
