Direktivy můžete přidat do HTML ve svém projektu Angular. Některé řídí strukturu vašeho označení, zatímco jiné se zaměřují na atributy.
Tento článek projde šesti nejběžnějšími direktivami Angular: ngFor, ngIf, ngClass, ngStyle, ngModel a ngSwitch.
Co jsou úhlové směrnice?
Direktivy Angular vám umožňují používat příkazy if a cykly for a přidat další chování do kódu HTML projektu Angular.
| Směrnice | Popis |
|---|---|
| *ngIf | ngIf můžete použít, když chcete, aby se určité bloky HTML zobrazovaly, pouze pokud splňují určitou podmínku. Pokud jste například měli formulář s vyskakovacím oknem, které se zobrazí poté, co uživatel zadá vstup pro určité pole. |
| *ngFor | ngFor můžete použít, pokud potřebujete určitý blok opakovat mnohokrát. Pokud jste například měli seznam položek a potřebovali pro každou položku zobrazit div. |
| *Třída ng | To přidává podmíněný styl pomocí třídy. Pokud příkaz if splňuje podmínku, použije zadanou třídu. |
| *ngStyle | To přidává podmíněný in-line styl. Pokud příkaz if splňuje podmínku, použije zadané styly. |
| *ngModel | To vám umožní provést obousměrnou vazbu. To znamená, že můžete předávat data oběma směry mezi souborem HTML a TypeScript. Můžete například předat hodnotu atributu ze souboru TypeScript do souboru HTML a naopak. |
| *ngSwitch | To vám umožní přidat příkaz switch s mnoha případy pro kontrolu mnoha hodnot. Na základě případů se zobrazí určité prvky HTML. |
Strukturální směrnice zahrnují strukturu prvků HTML. Patří mezi ně ngIf, ngFor a ngSwitch. Direktivy atributů zahrnují změnu vlastností prvků HTML. Patří mezi ně ngStyle, ngClass a ngModel.
Jak používat ngIf
Chcete-li použít ngIf, budete potřebovat podmínku, která se vyhodnotí jako pravdivá, aby se zobrazil konkrétní prvek HTML.
- Přidejte do souboru TypeScript dvě proměnné. V tomto příkladu je proměnná noPlaylists a proměnná pro uložení seznamů stop. Tato proměnná se vyhodnotí jako true, pokud je délka pole seznamů stop 0.
noPlaylists: boolean = false;
seznamy skladeb: libovolný = [];konstruktor() { }
ngOnInit(): void {
if (this.playlists.length 0) {
this.noPlaylists = true;
}
} - Do kódu HTML přidejte příkaz *ngIf. Pokud má hodnotu noPlaylists hodnotu true, zobrazí se chybová zpráva obsažená v níže uvedeném rozsahu. Jinak tomu tak nebude. ngIf můžete použít na různé typy HTML tagy.
Nejsou k dispozici žádné seznamy skladeb.
- Chcete-li přidat komponentu "else" do příkazu if, budete muset přidat HTML kód pro část "else" v bloku šablony.
Nejsou k dispozici žádné seznamy skladeb.
Byly nalezeny seznamy skladeb.
Jak používat ngFor
Pokud potřebujete opakovat určitý počet bloků na stránce, můžete použít direktivu ngFor.
- V souboru TypeScript přidejte položky do pole.
seznamy skladeb: jakýkoli = [
{"name": "Rock", "numberOfSongs": 5},
{"name": "Contemporary", "numberOfSongs": 9},
{"name": "Popular", "numberOfSongs": 14},
{"name": "Acoustic", "numberOfSongs": 3},
{"name": "Svatební písně", "numberOfSongs": 25},
{"name": "Metal", "numberOfSongs": 0},
]; - Do souboru HTML přidejte příkaz *ngFor.
Uvnitř ngFor budete moci odkazovat na každý objekt v poli pomocí proměnné „playlist“. "playlist.name" a "playlist.numberOfSongs" vytisknou oba atributy v rámci štítek.Byly nalezeny seznamy skladeb.
{{playlist.name}}
{{playlist.numberOfSongs}} skladeb
Jak používat ngClass
Třídu stylu, kterou konkrétní div používá, můžete změnit na základě podmínky.
- Přidejte do souboru CSS dvě třídy s různými styly. Můžete přidat jakýkoli druh CSS styling chcete, například různé barvy pozadí.
.písně {
barva pozadí: #F7F5F2;
}
.noSongs {
barva pozadí: #FFA8A8;
} - V rámci for-loop z předchozího kroku přidejte direktivu atributu ngClass. [ngClass]="playlist.numberOfSongs > 0? 'songs': 'noSongs'“ používá totéž ternární operátor JavaScript a další jazyky používají.
Pokud je počet skladeb větší než nula, použije se třída "songs" na div. To dá divu šedou barvu pozadí. V opačném případě, pokud je počet skladeb nulový, použije třídu „noSongs“ na div. Div získá červenou barvu pozadí.
{{playlist.name}}
{{playlist.numberOfSongs}} skladeb
Jak používat ngStyle
Namísto použití ngClass můžete použít ngStyle, pokud chcete použít in-line styl namísto stylování prostřednictvím třídy.
- Změňte třídu ngClass z předchozího kroku a použijte místo ní ngStyle.
{{playlist.name}}
{{playlist.numberOfSongs}} skladeb
[ngStyle]="{'background-color': playlist.numberOfSongs > 0? '#F7F5F2': '#FFA8A8', 'color': playlist.numberOfSongs > 0? 'black': 'darkblue' }"
Jak používat ngModel
Pro obousměrnou vazbu můžete použít ngModel. To znamená, že můžete předávat hodnotu atributu mezi soubory HTML i TypeScript.
Řekněme například, že máte v souboru HTML vstupní prvek, který používá ngModel. Atribut ngModel je vázán na proměnnou v souboru TypeScript. Když do vstupu zadáte hodnotu, aktualizuje se proměnná v souboru TypeScript.
Změny provedené v atributu v souboru TypeScript se projeví také v HTML, pokud tuto proměnnou používají jiné divy.
- V app.module.ts přidejte FormsModule do importů v horní části souboru a také do pole imports.
import { FormsModule } z '@angular/forms';
@NgModule({
dovoz: [
...
FormsModule
]
}) - Přidejte atribut do souboru TypeScript, abyste měli přehled o tom, kdy uživatel přejmenovává seznam stop.
přejmenování Playlistů: boolean = false; - Udělejte proměnnou seznamů skladeb jako veřejnou, aby byla přístupná při použití ngModel v souboru HTML.
veřejné seznamy skladeb: jakýkoli = [
...
]; - Přidejte do souboru HTML dvě tlačítka, která vám umožní přejmenovat nebo zrušit přejmenování každého seznamu skladeb.
- Přidejte vstupní pole do prvku div každého seznamu videí. Vstup bude viditelný pouze po kliknutí na Přejmenovat seznam skladeb knoflík. Toto vstupní pole bude mít ngModel vázaný na "playlist.name".
Když do vstupního pole zadáte nový název, playlist.name se v souboru TypeScript aktualizuje. Tím se také aktualizují ostatní divy v souboru HTML, které používají playlist.name.
Jak používat ngSwitch
ngSwitch můžete použít k zobrazení určitých prvků na základě případů v pouzdru přepínače.
- Přidejte nový atribut „rating“ k objektům v poli seznamů stop. Tento atribut může být libovolné číslo mezi 0 a 5 (včetně).
veřejné seznamy skladeb: jakýkoli = [
{"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},
]; - Pod název a počet skladeb pro seznam skladeb přidejte pouzdro přepínače. Na základě čísla hodnocení seznamu skladeb se v seznamu skladeb zobrazí správný počet hvězdiček.
{{playlist.name}}
{{playlist.numberOfSongs}} skladeb
★★★★★★★★★★★★★★★Žádné hodnocení
Naučte se více s Angular
Nyní jste se naučili základy direktiv Angular, včetně toho, jak používat ngIf, ngFor, ngClass, ngStyle, ngModel a ngSwitch. Můžete je kombinovat a vytvářet tak složitější uživatelská rozhraní. Je toho mnohem více, co můžete prozkoumat a dozvědět se o Angular, bez ohledu na to, zda jste začátečník nebo pokročilý.
Top 8 úhlových kurzů pro začátečníky a pokročilé uživatele
Přečtěte si další
Související témata
- Programování
- Programování
- JavaScript
- HTML
- CSS
O autorovi
Sharlene je Tech Writer na MUO a také pracuje na plný úvazek ve vývoji softwaru. Má bakalářský titul v oboru IT a má předchozí zkušenosti se zajišťováním kvality a univerzitním doučováním. Sharlene miluje hry a hru na klavír.
Přihlaste se k odběru našeho newsletteru
Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné e-knihy a exkluzivní nabídky!
Chcete-li se přihlásit k odběru, klikněte sem
