Az Angular projektben direktívákat adhat hozzá a HTML-hez. Egyesek szabályozzák a jelölés szerkezetét, míg mások az attribútumokra összpontosítanak.
Ez a cikk a hat leggyakoribb Angular direktívát tárgyalja: ngFor, ngIf, ngClass, ngStyle, ngModel és ngSwitch.
Mik azok a szögirányelvek?
Az Angular direktívák lehetővé teszik if utasítások és for ciklusok használatát, és más viselkedést adnak egy Angular projekt HTML kódjához.
| Irányelv | Leírás |
|---|---|
| *ngHa | Az ngIf-et akkor használhatja, ha azt szeretné, hogy bizonyos HTML-blokkok csak akkor jelenjenek meg, ha megfelelnek egy bizonyos feltételnek. Például, ha volt egy űrlapja egy előugró ablakkal, amely azután jelenik meg, hogy a felhasználó megadta a bevitelt egy bizonyos mezőhöz. |
| *ngFor | Használhatja az ngFor-t, ha egy bizonyos blokk többszöri megismétlésére van szüksége. Például, ha van egy listája az elemekről, és minden elemhez meg kellett jelenítenie a div-t. |
| *ngClass | Ez feltételes stílust ad hozzá egy osztály használatával. Ha egy if-utasítás megfelel a feltételnek, akkor a megadott osztályt fogja alkalmazni. |
| *ngStyle | Ez feltételes soron belüli stílust ad hozzá. Ha egy if-utasítás megfelel a feltételnek, akkor a megadott stílusokat fogja alkalmazni. |
| *ngModell | Ez lehetővé teszi a kétirányú kötést. Ez azt jelenti, hogy mindkét irányban átadhatja az adatokat a HTML és a TypeScript fájl között. Például átadhatja egy attribútum értékét a TypeScript-fájlból a HTML-fájlba, és fordítva. |
| *ngSwitch | Ezzel sok esetet tartalmazó switch utasítást adhat hozzá sok érték ellenőrzéséhez. Az esetek alapján bizonyos HTML elemek megjelennek. |
A strukturális irányelvek a HTML elemek szerkezetét foglalják magukban. Ezek közé tartozik az ngIf, ngFor és ngSwitch. Az attribútum direktívák magukban foglalják a HTML elemek tulajdonságainak megváltoztatását. Ezek közé tartozik az ngStyle, ngClass és ngModel.
Az ngIf használata
Az ngIf használatához szüksége lesz egy feltételre, amelyet igazra kell értékelni egy adott HTML-elem megjelenítéséhez.
- Adjon hozzá két változót a TypeScript-fájlhoz. Ebben a példában van egy noPlaylists változó és egy változó a lejátszási listák tárolására. Ez a változó igaz, ha a lejátszási listák tömbjének hossza 0.
noPlaylists: logikai = false;
lejátszási listák: any = [];konstruktor() { }
ngOnInit(): void {
if (this.playlists.length 0) {
this.noPlaylists = igaz;
}
} - A HTML-ben adja hozzá az *ngIf utasítást. Ha a noPlaylists igaz, akkor az alábbi szakaszban található hibaüzenet jelenik meg. Ellenkező esetben nem. Az ngIf-et különböző típusokra alkalmazhatja HTML címkék.
Nincsenek elérhető lejátszási listák.
- Ha egy "else" komponenst szeretne hozzáadni az if-utasításhoz, hozzá kell adnia az "else" rész HTML-kódját egy sablonblokkban.
Nincsenek elérhető lejátszási listák.
Lejátszási listák találhatók.
Az ngFor használata
Ha meg kell ismételnie bizonyos számú blokkot egy oldalon, használhatja az ngFor direktívát.
- A TypeScript fájlban adjon hozzá elemeket a tömbhöz.
lejátszási listák: any = [
{"name": "Rock", "numberOfSongs": 5},
{"name": "Kortárs", "numberOfSongs": 9},
{"name": "Népszerű", "numberOfSongs": 14},
{"name": "Acoustic", "numberOfSongs": 3},
{"name": "Esküvői dalok", "numberOfSongs": 25},
{"name": "Metal", "numberOfSongs": 0},
]; - A HTML-fájlban adja hozzá az *ngFor utasítást.
Az ngFor-on belül a "playlist" változó használatával hivatkozhat a tömb minden egyes objektumára. A "playlist.name" és a "playlist.numberOfSongs" mindkét attribútumot kinyomtatja a címke.Lejátszási listák találhatók.
{{playlist.name}}
{{playlist.numberOfSongs}} dal
Az ngClass használata
Megváltoztathatja az adott div által használt stílusosztályt egy feltétel alapján.
- Adjon hozzá két osztályt a CSS-fájlhoz különböző stílusokkal. Bármilyen fajtát hozzáadhat CSS stílus kívánt, például különböző háttérszíneket.
.dalok {
háttérszín: #F7F5F2;
}
.noSongs {
háttérszín: #FFA8A8;
} - Az előző lépés for-ciklusán belül adja hozzá az ngClass attribútum direktívát. [ngClass]="playlist.numberOfSongs > 0? 'songs': a 'noSongs'" ugyanazt használja háromtagú operátor, amely a JavaScriptet és más nyelvek használata.
Ha a dalok száma nagyobb, mint nulla, akkor a „songs” osztályt alkalmazza a div-re. Ezzel a div szürke háttérszínt kap. Ellenkező esetben, ha a dalok száma nulla, akkor a "noSongs" osztályt alkalmazza a div-re. Ezzel a div piros háttérszínt kap.
{{playlist.name}}
{{playlist.numberOfSongs}} dal
Az ngStyle használata
Az ngClass használata helyett használhatja az ngStyle-t, ha soron belüli stílust szeretne alkalmazni az osztályon keresztüli stílus helyett.
- Módosítsa az ngClass értéket az előző lépésről, hogy helyette az ngStyle-t használja.
{{playlist.name}}
{{playlist.numberOfSongs}} dal
[ngStyle]="{'background-color': playlist.numberOfSongs > 0? '#F7F5F2': '#FFA8A8', 'szín': playlist.numberOfSongs > 0? 'fekete': 'sötétkék' }"
Az ngModel használata
Az ngModel-t használhatja kétirányú kötéshez. Ez azt jelenti, hogy átadhatja egy attribútum értékét a HTML és a TypeScript fájlok között is.
Tegyük fel például, hogy van egy bemeneti eleme a HTML-fájlban, amely az ngModelt használja. Az ngModel attribútum egy változóhoz van kötve a TypeScript fájlban. Amikor beír egy értéket a bevitelbe, a rendszer frissíti a változót a TypeScript fájlban.
A TypeScript-fájlban az attribútumban végrehajtott módosítások a HTML-ben is megjelennek, ha más divek használják ezt a változót.
- Az app.module.ts fájlban adja hozzá a FormsModule-t az importáláshoz a fájl tetején, valamint az importálási tömbhöz.
import { FormsModule } innen: '@angular/forms';
@NgModule({
import: [
...
FormsModule
]
}) - Adjon hozzá egy attribútumot a TypeScript-fájlhoz, hogy nyomon kövesse, mikor nevezi át a felhasználó egy lejátszási listát.
Lejátszási listák átnevezése: logikai = false; - Tegye nyilvánossá a lejátszási listák változóját, hogy ez elérhető legyen az ngModel használatakor a HTML-fájlban.
nyilvános lejátszási listák: any = [
...
]; - Adjon hozzá két gombot a HTML-fájlhoz, amely lehetővé teszi az egyes lejátszási listák átnevezését vagy megszakítását.
- Adjon hozzá egy beviteli mezőt az egyes lejátszási listák div részéhez. A bevitel csak akkor lesz látható, ha rákattint a gombra Lejátszási lista átnevezése gomb. Ebben a beviteli mezőben lesz egy ngModel, amely a "playlist.name"-hez van kötve.
Amikor új nevet ír be a beviteli mezőbe, a playlist.name frissítésre kerül a TypeScript fájlban. Ezzel frissíti a HTML-fájl többi divjét is, amelyek a playlist.name fájlt használják.
Az ngSwitch használata
Az ngSwitch segítségével megjeleníthet bizonyos elemeket a kapcsolók esetei alapján.
- Adjon hozzá egy új „rating” attribútumot a lejátszási listák tömbjén belüli objektumokhoz. Ez az attribútum bármilyen szám lehet 0 és 5 között (beleértve).
nyilvános lejátszási listák: any = [
{"name": "Rock", "numberOfSongs": 5, "rating": 5},
{"name": "Kortárs", "numberOfSongs": 9, "rating": 1},
{"name": "Népszerű", "numberOfSongs": 14, "rating": 5},
{"name": "Acoustic", "numberOfSongs": 3, "rating": 4},
{"name": "Esküvői dalok", "numberOfSongs": 25, "rating": 5},
{"name": "Metal", "numberOfSongs": 0, "rating": 0},
]; - Adjon hozzá egy kapcsolóbetétet a lejátszási lista dalainak neve és száma alá. A lejátszási lista értékelési száma alapján a lejátszási lista a megfelelő számú csillagot mutatja.
{{playlist.name}}
{{playlist.numberOfSongs}} dal
★★★★★★★★★★★★★★★Nincs értékelés
Tudjon meg többet az Angular segítségével
Most megtanulta az Angular direktívák alapjait, beleértve az ngIf, ngFor, ngClass, ngStyle, ngModel és ngSwitch használatát. Kombinálhatja őket összetettebb felhasználói felületek létrehozásához. Sokkal többet fedezhet fel és tanulhat az Angularról, függetlenül attól, hogy kezdő vagy haladó szinten.
A legjobb 8 szögtanfolyam kezdőknek és haladóknak
Olvassa el a következőt
Kapcsolódó témák
- Programozás
- Programozás
- JavaScript
- HTML
- CSS
A szerzőről
Sharlene a MUO műszaki írója, és teljes munkaidőben szoftverfejlesztéssel foglalkozik. Bachelor of IT-vel rendelkezik, és korábbi tapasztalata van a minőségbiztosítás és az egyetemi oktatás terén. Sharlene szeret játszani és zongorázni.
Iratkozzon fel hírlevelünkre
Csatlakozzon hírlevelünkhöz műszaki tippekért, ismertetőkért, ingyenes e-könyvekért és exkluzív ajánlatokért!
Kattintson ide az előfizetéshez
