Ak sa v kódovacom priemysle pohybujete už nejaký čas, pravdepodobne už viete, že vývoj dynamických variácií môže byť vo webových aplikáciách pomerne veľká úloha. V závislosti na programovacej platforme, ktorú sa rozhodnete použiť, sa úroveň vašej zložitosti zvykne líšiť, ale tento výkon sa našťastie dá ľahko dosiahnuť v Angular 8 a tiež v niektorých predchádzajúcich verziách Angular. V tomto článku sa budeme zaoberať ngstyle v agulárnej 8.
Syntax vlastnosti šablóny v uhle 8
Predtým, ako sa pustíme do hĺbky preskúmania všetkých funkcií a modulov, ktoré Angular 8 prichádza, pozrime sa najskôr na syntax vlastnosti v Angular 8 a na to, ako môžeme zmeniť farbu vlastnosti color v čistej Jave.
nechajte myDiv = document.getElementById ('my-div') myDiv.style.color = 'orange' // aktualizácia div cez jeho vlastnostiUrobme rovnakú úlohu v Angular 8 využitím integrovaných knižníc a ďalších modulov.
štýl používajúci syntax vlastnosti, tento text je oranžový
Používajte syntax {property} a efektívne dosahujte ľubovoľný kód a robte v ňom zmeny takmer okamžite.
Vo vyššie uvedenom príklade je to, čo sme urobili, priamy prístup k vlastnosti štýlu prvku div. V porovnaní s vlastnosťami objektu a atribútu DOM sa to líši.
Pomocou zabudovaných charakteristík Angular 8 môžeme pridať prvky CSS do akejkoľvek triedy podľa nášho výberu. Ak tomu chcete lepšie porozumieť, pozrite si príklad uvedený nižšie.
Trieda CSS používajúca syntax vlastnosti, tento text je modrý
NgClass a NgStyle v Angular 8
Je zabudovaný do ngSyntax aj ngClass v Angular 8 a dajú sa použiť na rôzne účely. Svojím spôsobom vstavané moduly poskytujú cukor pre implementáciu zmien do zložitejších reťazcov ako iné. Pozrime sa na syntax pre ngStyle v Angular 8.
štýl pomocou ngStyle
Vo vyššie uvedenom príklade sme použili ngStyle v Angular na zmenu dynamiky viacerých prvkov v našej triede, zatiaľ čo v tej istej skupine sme použili niekoľko prvkov spoločne, aby sme uľahčili používateľovi prispôsobenie triedy podľa jeho potrieb.
Pokračovanie vyššie uvedeného príkladu.
štýl pomocou ngStyle + -
Teraz, keď viete o ngStyle, pozrime sa na niektoré prvky ngStyle.
pole tried reťazec tried objekt tried
ngClass in angular nám tiež umožňuje vykonávať zmeny v našom kóde mnohými spôsobmi, aby bolo možné dynamické zmeny implementovať behom okamihu, podobne ako ngStyle.
Pozrite sa na príklad nižšie a pozrite si ich oboch v akcii.
importovať {Component} z '@ angular / core' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) trieda exportu 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 v uhle 8
Teraz, keď poznáte základné vlastnosti ngClass aj ngStyle a čo je možné dosiahnuť použitím jedného alebo oboch z nich v platforme Angular 8, pozrime sa na použitie ngClick.
Čo je ngClick?
Ak v konkrétnej udalosti potrebujete spojiť viac prvkov programu, aby ste dosiahli jednu úlohu, musíte využiť ngClick.
ako obrátiť reťazec v pythone -
Vyššie je uvedený príklad toho, ako sa ngClick používa v AngularJS. Pokiaľ ide o Angular8, rovnaký modul neexistuje, a preto je potrebné využiť nasledujúce.
Vyššie uvedená syntax sa používa na uľahčenie väzby udalostí v Angular8, kde najskôr definujeme názov cieľovej udalosti spolu so zátvorkami a potom zahrnieme príkaz šablóny zahrnutím úvodzoviek a operátora rovnosti. Po vykonaní týchto krokov Angular8 nastaví obsluhovač udalostí pre túto udalosť a kedykoľvek sa spustí, táto udalosť sa vykoná.
Angular8 je nielen jedným z najpopulárnejších programovacích jazykov, ale je tiež jedným z najdynamickejších vďaka širokej škále funkcií. Týmto sa dostávame na koniec tohto článku o NgStyle v uhle. Dúfam, že ste pochopili, ako tieto fungujú.
pozrite sa na od Edureka. Angular je framework jazyka JavaScript, ktorý sa používa na vytváranie škálovateľných, podnikových a výkonných webových aplikácií na strane klienta. Pretože je prijatie uhlového rámca vysoké, riadenie výkonu aplikácie je riadené komunitou nepriamo a prináša lepšie pracovné príležitosti. Cieľom školenia Angular Certification Training je pokryť všetky tieto nové koncepty vývoja podnikových aplikácií.