Možete dodati direktive u HTML u svom Angular projektu. Neki kontroliraju strukturu vaše oznake, dok se drugi fokusiraju na atribute.
Ovaj članak će proći kroz šest najčešćih Angular direktiva: ngFor, ngIf, ngClass, ngStyle, ngModel i ngSwitch.
Što su kutne direktive?
Angular direktive vam omogućuju korištenje if naredbi i for petlji, te dodavanje drugih ponašanja u HTML kod Angular projekta.
| Direktiva | Opis |
|---|---|
| *ngAko | Možete koristiti ngIf kada želite da se određeni HTML blokovi prikazuju samo ako ispunjavaju određeni uvjet. Na primjer, ako ste imali obrazac sa skočnim prozorom koji se prikazuje nakon što korisnik unese unos za određeno polje. |
| *ngZa | Možete koristiti ngFor ako trebate da se određeni blok ponovi mnogo puta. Na primjer, ako ste imali popis stavki i trebate prikazati div za svaku stavku. |
| *ngClass | Ovo dodaje uvjetni stil korištenjem klase. Ako if-naredba ispunjava uvjet, primijenit će navedenu klasu. |
| *ngStil | To dodaje uvjetni in-line stil. Ako if-naredba ispunjava uvjet, primijenit će navedene stilove. |
| *ngModel | To vam omogućuje dvosmjerno uvezivanje. To znači da možete prosljeđivati podatke u oba smjera između HTML i TypeScript datoteke. Na primjer, možete proslijediti vrijednost atributa iz TypeScript datoteke u HTML datoteku i obrnuto. |
| *ngSwitch | To vam omogućuje da dodate naredbu switch s mnogo slučajeva za provjeru mnogih vrijednosti. Na temelju slučajeva prikazat će se određeni HTML elementi. |
Strukturne direktive uključuju strukturu HTML elemenata. To uključuje ngIf, ngFor i ngSwitch. Smjernice atributa uključuju promjenu svojstava HTML elemenata. To uključuje ngStyle, ngClass i ngModel.
Kako koristiti ngIf
Da biste koristili ngIf, trebat će vam uvjet za procjenu na istinito za prikaz određenog HTML elementa.
- Dodajte dvije varijable u svoju TypeScript datoteku. U ovom primjeru postoji varijabla noPlaylists i varijabla za pohranjivanje popisa pjesama. Ova će varijabla biti istinita ako je duljina niza popisa za reprodukciju 0.
noPlaylists: boolean = false;
popisi za reprodukciju: bilo koji = [];konstruktor() { }
ngOnInit(): void {
if (this.playlists.length 0) {
this.noPlaylists = istina;
}
} - U HTML dodajte naredbu *ngIf. Ako je noPlaylists istina, pojavit će se poruka o pogrešci sadržana u rasponu ispod. Inače neće. Možete primijeniti ngIf na različite vrste HTML oznake.
Nema dostupnih popisa za reprodukciju.
- Da biste dodali komponentu "else" u if-naredbu, morat ćete dodati HTML kod za dio "else" u blok predloška.
Nema dostupnih popisa za reprodukciju.
Popisi za reprodukciju pronađeni.
Kako koristiti ngFor
Ako trebate ponoviti određeni broj blokova na stranici, možete koristiti direktivu ngFor.
- U datoteci TypeScript dodajte stavke u niz.
popisi za reprodukciju: bilo koji = [
{"name": "Rock", "numberOfSongs": 5},
{"name": "Contemporary", "numberOfSongs": 9},
{"name": "Popular", "numberOfSongs": 14},
{"name": "Acoustic", "numberOfSongs": 3},
{"name": "Pjesme za vjenčanje", "numberOfSongs": 25},
{"name": "Metal", "numberOfSongs": 0},
]; - U HTML datoteci dodajte izraz *ngFor.
Unutar ngFor, moći ćete referencirati svaki objekt u nizu pomoću varijable "playlist". "playlist.name" i "playlist.numberOfSongs" ispisat će oba atributa unutar označiti.Popisi za reprodukciju pronađeni.
{{playlist.name}}
{{playlist.numberOfSongs}} pjesama
Kako koristiti ngClass
Možete promijeniti stilsku klasu koju koristi određeni div, na temelju uvjeta.
- Dodajte dvije klase u CSS datoteku s različitim stilovima. Možete dodati bilo koju vrstu CSS stil želite, kao što su različite boje pozadine.
.Pjesme {
boja pozadine: #F7F5F2;
}
.noSongs {
boja pozadine: #FFA8A8;
} - Unutar for-petlje iz prethodnog koraka dodajte direktivu atributa ngClass. [ngClass]="playlist.numberOfSongs > 0? 'songs': 'noSongs'" koristi isto ternarni operator koji JavaScript i drugim jezicima.
Ako je broj pjesama veći od nule, primijenit će klasu "pjesme" na div. Ovo će div dati sivu boju pozadine. Inače, ako je broj pjesama nula, primijenit će klasu "noSongs" na div. Ovo će div dati crvenu boju pozadine.
{{playlist.name}}
{{playlist.numberOfSongs}} pjesama
Kako koristiti ngStyle
Umjesto korištenja ngClass, možete koristiti ngStyle ako želite primijeniti in-line stil umjesto stiliziranja putem klase.
- Promijenite ngClass iz prethodnog koraka da umjesto toga koristite ngStyle.
{{playlist.name}}
{{playlist.numberOfSongs}} pjesama
[ngStyle]="{'background-color': playlist.numberOfSongs > 0? '#F7F5F2': '#FFA8A8', 'boja': playlist.numberOfSongs > 0? 'crna': 'tamnoplava' }"
Kako koristiti ngModel
Možete koristiti ngModel za dvosmjerno uvezivanje. To znači da možete proslijediti vrijednost atributa između HTML i TypeScript datoteka.
Na primjer, recimo da imate element unosa u HTML datoteci koji koristi ngModel. Atribut ngModel vezan je za varijablu u datoteci TypeScript. Kada unesete vrijednost u ulaz, ažurirat će se varijabla u datoteci TypeScript.
Promjene napravljene u atributu u datoteci TypeScript također će se odraziti u HTML-u ako drugi div-ovi koriste tu varijablu.
- U app.module.ts dodajte FormsModule u uvoze na vrhu datoteke, a također i u niz importova.
import { FormsModule } iz '@angular/forms';
@NgModule({
uvozi: [
...
FormsModule
]
}) - Dodajte atribut u TypeScript datoteku da biste pratili kada korisnik preimenuje popis za reprodukciju.
preimenovanjePlaylists: boolean = false; - Učinite varijablu popisa pjesama javnom tako da joj se može pristupiti kada koristite ngModel u HTML datoteci.
javni popisi za reprodukciju: bilo koji = [
...
]; - Dodajte dva gumba u HTML datoteku, što će vam omogućiti da preimenujete ili poništite preimenovanje svakog popisa za reprodukciju.
- Dodajte okvir za unos unutar div liste za reprodukciju. Unos će biti vidljiv samo kada kliknete na Preimenujte popis za reprodukciju dugme. Ovaj okvir za unos će imati ngModel vezan za "playlist.name".
Kada unesete novi naziv u okvir za unos, playlist.name će se ažurirati u datoteci TypeScript. Ovo će također ažurirati druge divove u HTML datoteci koji koriste playlist.name.
Kako koristiti ngSwitch
Možete koristiti ngSwitch za prikaz određenih elemenata na temelju slučajeva unutar slučaja prekidača.
- Dodajte novi atribut "ocjene" objektima unutar niza popisa za reprodukciju. Ovaj atribut može biti bilo koji broj između 0 i 5 (uključivo).
javni popisi za reprodukciju: bilo koji = [
{"name": "Rock", "numberOfSongs": 5, "rating": 5},
{"name": "Contemporary", "numberOfSongs": 9, "rating": 1},
{"name": "Popular", "numberOfSongs": 14, "rating": 5},
{"name": "Acoustic", "numberOfSongs": 3, "rating": 4},
{"name": "Wedding Songs", "numberOfSongs": 25, "rating": 5},
{"name": "Metal", "numberOfSongs": 0, "rating": 0},
]; - Dodajte veličinu prekidača ispod naziva i broja pjesama za popis za reprodukciju. Na temelju broja ocjene za popis za reprodukciju, popis za reprodukciju će prikazati točan broj zvjezdica.
{{playlist.name}}
{{playlist.numberOfSongs}} pjesama
★★★★★★★★★★★★★★★Nema ocjena
Saznajte više uz Angular
Sada ste naučili osnove Angular direktiva, uključujući kako koristiti ngIf, ngFor, ngClass, ngStyle, ngModel i ngSwitch. Možete ih kombinirati za stvaranje složenijih korisničkih sučelja. Postoji još puno toga što možete istražiti i naučiti o Angularu, bez obzira jeste li početnik ili na naprednoj razini.
Top 8 kutnih tečajeva za početnike i napredne korisnike
Pročitajte dalje
Povezane teme
- Programiranje
- Programiranje
- JavaScript
- HTML
- CSS
O autoru
Sharlene je tehnička spisateljica u MUO-u, a također radi puno radno vrijeme u razvoju softvera. Diplomirala je informatiku i ima prethodno iskustvo u osiguravanju kvalitete i sveučilišnom podučavanju. Sharlene voli igre i sviranje klavira.
Pretplatite se na naše obavijesti
Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e-knjige i ekskluzivne ponude!
Kliknite ovdje za pretplatu
