Voit lisätä ohjeita Angular-projektisi HTML-koodiin. Jotkut hallitsevat merkintöjesi rakennetta, kun taas toiset keskittyvät attribuutteihin.
Tässä artikkelissa käydään läpi kuusi yleisintä Angular-direktiiviä: ngFor, ngIf, ngClass, ngStyle, ngModel ja ngSwitch.
Mitä ovat kulmadirektiivit?
Angular-käskyjen avulla voit käyttää if-lauseita ja for-silmukoita ja lisätä muuta käyttäytymistä Angular-projektin HTML-koodiin.
| Direktiivi | Kuvaus |
|---|---|
| *ngJos | Voit käyttää ngIfiä, kun haluat tiettyjen HTML-lohkojen näkyvän vain, jos ne täyttävät tietyn ehdon. Jos sinulla oli esimerkiksi lomake, jossa on ponnahdusikkuna, joka tulee näkyviin, kun käyttäjä on syöttänyt tiettyyn kenttään. |
| *ngFor | Voit käyttää ngFor-toimintoa, jos tarvitset tietyn lohkon toistamaan useita kertoja. Jos sinulla oli esimerkiksi luettelo kohteista ja sinun piti näyttää div-tunnus jokaiselle tuotteelle. |
| *ngClass | Tämä lisää ehdollista tyyliä luokan avulla. Jos if-lause täyttää ehdon, se käyttää määritettyä luokkaa. |
| *ngTyyli | Tämä lisää ehdollista in-line -tyyliä. Jos if-lause täyttää ehdon, se käyttää määritettyjä tyylejä. |
| *ngMalli | Tämän avulla voit tehdä kaksisuuntaisen sidon. Tämä tarkoittaa, että voit siirtää tietoja molempiin suuntiin HTML- ja TypeScript-tiedoston välillä. Voit esimerkiksi välittää attribuutin arvon TypeScript-tiedostosta HTML-tiedostoon ja päinvastoin. |
| *ngSwitch | Tämän avulla voit lisätä useita tapauksia sisältävän kytkinlauseen monien arvojen tarkistamiseksi. Tapausten perusteella tietyt HTML-elementit näkyvät. |
Rakennedirektiivit sisältävät HTML-elementtien rakenteen. Näitä ovat ngIf, ngFor ja ngSwitch. Attribuuttimääräykset sisältävät HTML-elementtien ominaisuuksien muuttamisen. Näitä ovat ngStyle, ngClass ja ngModel.
Kuinka käyttää ngIf
Jotta voit käyttää ngIf-toimintoa, tarvitset ehdon, joka on arvioitava todeksi tietyn HTML-elementin näyttämiselle.
- Lisää kaksi muuttujaa TypeScript-tiedostoosi. Tässä esimerkissä on noPlaylists-muuttuja ja muuttuja soittolistojen tallentamiseen. Tämän muuttujan arvoksi tulee tosi, jos soittolistataulukon pituus on 0.
noPlaylists: boolean = false;
soittolistat: mikä tahansa = [];rakentaja() { }
ngOnInit(): void {
if (this.playlists.length 0) {
this.noPlaylists = tosi;
}
} - Lisää HTML-koodiin *ngIf-lauseke. Jos noPlaylists on tosi, alla olevan jakson sisältämä virheilmoitus tulee näkyviin. Muuten ei. Voit soveltaa ngIfiä erilaisiin HTML-tunnisteet.
Soittolistoja ei ole saatavilla.
- Jos haluat lisätä "else"-komponentin if-lauseeseen, sinun on lisättävä HTML-koodi "else"-osalle mallilohkoon.
Soittolistoja ei ole saatavilla.
Soittolistat löytyivät.
Kuinka käyttää ngForia
Jos haluat toistaa tietyn määrän lohkoja sivulla, voit käyttää ngFor-direktiiviä.
- Lisää TypeScript-tiedostossa kohteita taulukkoon.
soittolistat: mikä tahansa = [
{"name": "Rock", "numberOfSongs": 5},
{"name": "Contemporary", "numberOfSongs": 9},
{"name": "Suosittu", "numberOfSongs": 14},
{"name": "Akustinen", "numberOfSongs": 3},
{"name": "Häälaulut", "numberOfSongs": 25},
{"name": "Metal", "numberOfSongs": 0},
]; - Lisää HTML-tiedostoon *ngFor-lauseke.
ngFor: n sisällä voit viitata jokaiseen taulukon objektiin "soittolista"-muuttujan avulla. "playlist.name" ja "playlist.numberOfSongs" tulostavat molemmat määritteet tag.Soittolistat löytyivät.
{{soittolista.nimi}}
{{playlist.numberOfSongs}} kappaletta
Kuinka käyttää ngClassia
Voit muuttaa tietyn div: n käyttämää tyyliluokkaa ehdon perusteella.
- Lisää kaksi luokkaa CSS-tiedostoon eri tyyleillä. Voit lisätä mitä tahansa CSS-tyyli haluat, kuten erilaiset taustavärit.
.songs {
taustaväri: #F7F5F2;
}
.noSongs {
taustaväri: #FFA8A8;
} - Lisää edellisen vaiheen for-silmukkaan ngClass-attribuuttidirektiivi. [ngClass]="playlist.numberOfSongs > 0? 'songs': 'noSongs'" käyttää samaa kolmiosainen operaattori, joka on JavaScript ja muiden kielten käytössä.
Jos kappaleiden määrä on suurempi kuin nolla, se soveltaa "laulut"-luokkaa div-kategoriaan. Tämä antaa diville harmaan taustavärin. Muussa tapauksessa, jos kappaleiden määrä on nolla, se soveltaa "noSongs"-luokkaa div-elementtiin. Tämä antaa div: lle punaisen taustavärin.
{{soittolista.nimi}}
{{playlist.numberOfSongs}} kappaletta
Kuinka käyttää ngStyleä
ngClassin sijaan voit käyttää ngStyleä, jos haluat käyttää in-line-tyyliä luokan kautta muotoilun sijaan.
- Muuta ngClass edellisestä vaiheesta käyttämään ngStylea sen sijaan.
{{soittolista.nimi}}
{{playlist.numberOfSongs}} kappaletta
[ngStyle]="{'background-color': playlist.numberOfSongs > 0? '#F7F5F2': '#FFA8A8', 'color': playlist.numberOfSongs > 0? 'musta': 'tummansininen' }"
Kuinka käyttää ngModelia
Voit käyttää ngModel-mallia kaksisuuntaiseen sidontaan. Tämä tarkoittaa, että voit välittää attribuutin arvon sekä HTML- että TypeScript-tiedostojen välillä.
Oletetaan esimerkiksi, että sinulla on HTML-tiedostossa syöteelementti, joka käyttää ngModel-mallia. Attribuutti ngModel on sidottu TypeScript-tiedoston muuttujaan. Kun syötät arvon syötteeseen, se päivittää TypeScript-tiedoston muuttujan.
TypeScript-tiedoston attribuutille tehdyt muutokset näkyvät myös HTML-koodissa, jos muut divit käyttävät kyseistä muuttujaa.
- Lisää tiedostossa app.module.ts FormsModule tiedoston yläreunassa olevaan tuontiin ja myös tuontitaulukkoon.
tuo { FormsModule } osoitteesta @angular/forms;
@NgModule({
tuonti: [
...
FormsModule
]
}) - Lisää TypeScript-tiedostoon attribuutti, jonka avulla voit seurata, milloin käyttäjä nimeää uudelleen soittolistan.
uudelleennimeäminen Playlists: boolean = false; - Tee soittolistamuuttuja julkiseksi, jotta se on käytettävissä käytettäessä ngModel-muotoa HTML-tiedostossa.
julkiset soittolistat: mikä tahansa = [
...
]; - Lisää HTML-tiedostoon kaksi painiketta, joiden avulla voit nimetä uudelleen tai peruuttaa jokaisen soittolistan uudelleennimeämisen.
- Lisää syöttöruutu jokaisen soittolistan div-kohtaan. Syöte näkyy vain, kun napsautat Nimeä soittolista uudelleen -painiketta. Tässä syöttöruudussa on ngModel, joka on sidottu "soittolista.nimi".
Kun kirjoitat uuden nimen syöttöruutuun, soittolistan nimi päivittyy TypeScript-tiedostoon. Tämä päivittää myös muut HTML-tiedoston div-tiedostot, jotka käyttävät soittolista.nimi.
Kuinka käyttää ngSwitchiä
Voit käyttää ngSwitchiä näyttämään tiettyjä elementtejä kytkinkotelon tapausten perusteella.
- Lisää uusi "rating"-attribuutti soittolistataulukon objekteihin. Tämä attribuutti voi olla mikä tahansa luku väliltä 0–5 (mukaan lukien).
julkiset soittolistat: mikä tahansa = [
{"name": "Rock", "numberOfSongs": 5, "rating": 5},
{"name": "Contemporary", "numberOfSongs": 9, "rating": 1},
{"name": "Suosittu", "numberOfSongs": 14, "rating": 5},
{"name": "Akustinen", "numberOfSongs": 3, "rating": 4},
{"name": "Häälaulut", "numberOfSongs": 25, "rating": 5},
{"name": "Metal", "numberOfSongs": 0, "rating": 0},
]; - Lisää kytkinkotelo soittolistan kappaleiden nimen ja lukumäärän alle. Soittolistan luokitusnumeron perusteella soittolista näyttää oikean määrän tähtiä.
{{soittolista.nimi}}
{{playlist.numberOfSongs}} kappaletta
★★★★★★★★★★★★★★★Ei arvioita
Opi lisää Angularin avulla
Nyt olet oppinut Angular-käskyjen perusteet, mukaan lukien ngIf-, ngFor-, ngClass-, ngStyle-, ngModel- ja ngSwitch-toimintojen käytön. Voit yhdistää niitä luodaksesi monimutkaisempia käyttöliittymiä. Sinulla on niin paljon muuta tutkittavaa ja opittavaa Angularista riippumatta siitä, oletko aloittelija tai edistynyt.
8 parasta kulmakurssia aloittelijoille ja kokeneille käyttäjille
Lue Seuraava
Liittyvät aiheet
- Ohjelmointi
- Ohjelmointi
- JavaScript
- HTML
- CSS
Kirjailijasta
Sharlene on tekninen kirjoittaja MUO: ssa ja työskentelee myös kokopäiväisesti ohjelmistokehityksessä. Hän on koulutukseltaan tietotekniikan kandidaatti ja hänellä on aikaisempaa kokemusta laadunvarmistuksesta ja yliopistotutoroinnista. Sharlene rakastaa pelaamista ja pianon soittamista.
tilaa uutiskirjeemme
Liity uutiskirjeemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e-kirjoja ja eksklusiivisia tarjouksia!
Klikkaa tästä tilataksesi
