Ha már egy ideje a kódolóiparral foglalkozik, akkor valószínűleg már tudja, hogy a dinamikus variációk fejlesztése meglehetősen nehéz feladat lehet a webalkalmazásokban. Az Ön által választott programozási platformtól függően a bonyolultság szintje változó lehet, de szerencsére ez a teljesítmény könnyen elérhető az Angular 8 és az Angular néhány korábbi verziójában is. Ebben a cikkben az ngstyle-t tárgyaljuk az agular 8-ban.
Sablon tulajdonság szintaxisa a 8 szögben
Mielőtt elmélyülnénk az Angular 8 összes funkciójának és moduljának a feltárásában, először nézzük meg a tulajdonság szintaxisát a Angular 8-ban és azt, hogy miként változtathatjuk meg egy színtulajdonság színét a tiszta Java-ban.
hadd myDiv = document.getElementById ('my-div') myDiv.style.color = 'orange' // frissítse a div-ot a tulajdonságain keresztülHajtsuk végre ugyanazt a feladatot az Angular 8-ban a beépített könyvtárak és más modulok felhasználásával.
stílus a tulajdonság szintaxisa alapján, ez a szöveg narancssárga
Használja a (z) {property} szintaxist, és hatékonyan érjen el bármilyen kódot, és szinte azonnal változtasson rajta.
A fenti példában, amit tettünk, közvetlenül a div elem stílus tulajdonságához jutunk hozzá. A DOM objektum és attribútum tulajdonságaihoz képest ez más.
A beépített Angular 8 jellemzők felhasználásával bármelyik általunk választott osztályhoz hozzáadhatjuk a CSS elemeket. Lásd az alábbi példát, hogy jobban megértse ezt.
CSS osztály tulajdonságszintaxist használva, ez a szöveg kék színű
NgClass és NgStyle 8 szögben
Be van építve az ngSyntax és az ngClass is Angular 8-ba, és ezek különböző célokra használhatók. Bizonyos módon a beépített modulok cukrot biztosítanak a többinél összetettebb húrok változásainak végrehajtásához. Vessünk egy pillantást az ngStyle szintaxisára a Angular 8-ban.
stílus az ngStyle használatával
A fenti példában az ngStyle in Angular-t használtuk osztályunk több elemének dinamikájának megváltoztatására, ugyanakkor ugyanabban a csoportban több elem együtt, hogy megkönnyítsük a felhasználót az osztály igényeinek megfelelő testreszabására.
A fenti példa folytatása.
stílus az ngStyle + - használatával
Most, hogy tud az ngStyle-ről, nézzük meg az ngStyle néhány elemét.
tömb osztályok string osztályok osztályok objektuma
A szögletes ngClass lehetővé teszi számunkra, hogy rengeteg módon változtassunk a kódunkon, így a dinamikus változtatások egy pillanat alatt megvalósíthatók, hasonlóan az ngStyle-hez.
Vessen egy pillantást az alábbi példára, hogy mindkettőjüket együtt cselekedhesse.
importálja a (z) {Component} elemet a @ @ angular / core '@ Component fájlból ({selector:' my-app ', templateUrl:' ./app.component.html ', styleUrls: [' ./app.component.css ']}) exportálási osztály AppComponent {color = 'pink' size = 16 displayText = 'show-class' visible = true constructor () {} toggle () {this.visible =! this.visible this.displayText = this.visible? 'show-class': 'hide-class'}}NgClick a 8. szögben
Most, hogy ismeri az ngClass és az ngStyle alapvető jellemzőit, és hogy mit érhetünk el mindkettőjük vagy mindkettőjük használatával az Angular 8 platformon, vizsgáljuk meg az ngClick használatát.
Mi az ngClick?
c ++ típusú konverzió
Ha egy adott eseményben össze kell kötnie a program több elemét, hogy egyetlen feladat érhető el, akkor ki kell használnia az ngClick alkalmazást.
A fenti példa az ngClick használatára az AngularJS-ben. Amikor az Angular8-ról van szó, ugyanaz a modul nem létezik, ezért az alábbiakat kell használni.
A fenti szintaxist használjuk az eseménykötés megkönnyítésére az Angular8-ban, ahol először meghatározzuk a célesemény nevét zárójelekkel együtt, majd sablon utasítást adunk be idézetek, valamint egyenlő operátor használatával. Miután ezeket a lépéseket megtette, az Angular8 beállít egy eseménykezelőt ehhez az eseményhez, és amikor csak kiváltja, ezt az eseményt végrehajtják.
Az Angular8 nem csak az egyik legnépszerűbb programozási nyelv odakinn, hanem a legdinamikusabb is, a funkciók széles skálájának köszönhetően. Ezzel a NgStyle-ről szóló cikk szögletes végére értünk. Remélem, megértette ezek működését.
nézd meg a írta Edureka. Az Angular egy JavaScript keretrendszer, amelyet méretezhető, vállalati és teljesítményű kliensoldali webalkalmazások létrehozására használnak. Mivel az Angular framework elfogadása magas, az alkalmazás teljesítménymenedzsmentje a közösség által vezérelt, közvetett módon jobb munkalehetőségeket eredményez. Az Angular Certification Training célja ezeknek az új koncepcióknak az áttekintése az Enterprise Application Development körül.