Kui olete juba mõnda aega kodeerimistööstuses tegutsenud, teate ilmselt juba, et dünaamiliste variatsioonide väljatöötamine võib veebirakendustes olla üsna suur ülesanne. Sõltuvalt teie valitud programmeerimisplatvormist kipub teie keerukuse tase varieeruma, kuid õnneks on selle saavutuse võimalik saavutada ka Angular 8 ja mõnes Angulari varasemas versioonis. Selles artiklis käsitleme ngstyle'i agularis 8.
Malli atribuudi süntaks nurgas 8
Enne kui läheme kõigi nurgaga 8 kaasas olevate funktsioonide ja moodulite uurimisse, vaatame kõigepealt nurgas 8 omaduste süntaksit ja seda, kuidas saame puhta Java värvivärvi värvi muuta.
las myDiv = document.getElementById ('my-div') myDiv.style.color = 'orange' // värskendab div-i selle omaduste kauduTehkem sama ülesanne nurgas 8, kasutades sisseehitatud teeke ja muid mooduleid.
klassi tee seadmine javas
stiil, kasutades vara süntaksit, see tekst on oranž
Kasutage süntaksi {property} ja saavutage tõhusalt mis tahes kood ning tehke selles muudatusi peaaegu kohe.
Ülaltoodud näites pääseb meie tehtud toimingutele otse juurde div elemendi stiili atribuudile. DOM-objekti ja atribuudi omadustega võrreldes on see erinev.
Kasutades sisseehitatud Angular 8 omadusi, võime lisada CSS-i elemendid igasse valitud klassi. Selle paremaks mõistmiseks vaadake allolevat näidet.
CSS-klass, kasutades omaduste süntaksit, on see tekst sinine
NgClass ja NgStyle nurgas 8
See on sisseehitatud nii ngSyntaxi kui ngClassiga nurgas 8 ja neid saab kasutada erinevatel eesmärkidel. Mõnes mõttes pakuvad sisseehitatud moodulid suhkrut keerukamate stringide muudatuste rakendamiseks kui teised. Heidame pilgu ngStyle'i süntaksile nurgas 8.
stiil ngStyle'i abil
Ülaltoodud näites oleme ngStyle in Angulari abil kasutanud oma klassi mitme elemendi dünaamika muutmist, samas grupis mitu elementi koos, et hõlbustada kasutajal klassi kohandamist vastavalt tema vajadustele.
Ülaltoodud näite jätkamine.
stiil, kasutades ngStyle + -
Nüüd, kui teate ngStyle'ist, vaatame ngStyle'i mõningaid elemente.
tabeli samm-sammult õpetus
klasside massiiv stringide klassid klasside objekt
Nurga all olev ngClass võimaldab meil ka oma koodis paljusid muudatusi teha, nii et dünaamilisi muudatusi saab rakendada üsna sarnaselt ngStyle'iga.
Vaadake allolevat näidet, et neid mõlemaid koos vaadata.
importige {komponent} kaustast @ @ nurk / tuum @ komponent ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) eksportklass AppComponent {color = 'pink' size = 16 displayText = 'show-class' visible = true constructor () {} toggle () {this.visible =! this.visible this.displayText = this.visible? 'show-class': 'peida-klass'}}NgClick nurgas 8
Nüüd, kui teate nii ngClassi kui ka ngStyle'i põhifunktsioone ja mida on võimalik saavutada mõlemat või mõlemat kasutades Angular 8 platvormi, uurigem ngClicki kasutamist.
Mis on ngClick?
Kui peate mingil konkreetsel juhul köitma programmi mitu elementi, et oleks võimalik saavutada üks ülesanne, peate kasutama ngClicki.
Ülaltoodud on näide ngClicki kasutamisest AngularJS-is. Kui tegemist on Angular8-ga, siis sama moodulit ei eksisteeri ja seega tuleb kasutada järgmist.
Ülaltoodud süntaksit kasutatakse sündmuste seondumise hõlbustamiseks Angular8-s, kus kõigepealt määratleme sihtsündmuse nimi koos sulgudega ja seejärel lisame malli lause, lisades nii tsitaadid kui ka operaatori võrdsed. Kui need toimingud on tehtud, seadistab Angular8 selle sündmuse jaoks sündmuste käitleja ja alati käivitatakse see sündmus.
Angular8 pole mitte ainult üks populaarsemaid programmeerimiskeeli sealsamas, vaid on ka tänu kõige laiematele funktsioonidele üks dünaamilisemaid. Sellega jõuame NgStyle'i nurgelise artikliga lõpuni. Loodan, et said aru, kuidas need toimivad.
teisenda stringi kuupäev kuupäevaks
vaadake autor Edureka. Angular on JavaScripti raamistik, mida kasutatakse skaleeritavate, ettevõtte ja jõudlusega kliendipoolsete veebirakenduste loomiseks. Kuna nurgaraamistiku kasutuselevõtt on kõrge, on rakenduse jõudlusjuhtimine kogukonnapõhine, võimaldades kaudselt paremaid töövõimalusi. Nurgasertifitseerimise koolituse eesmärk on hõlmata kõiki neid uusi kontseptsioone ettevõtte rakenduste arendamise ümber.