Jedną z kluczowych cech Angulara są dyrektywy. Dyrektywy Angular umożliwiają dodanie zachowania do elementów DOM. Angular zapewnia wiele wbudowanych dyrektyw, a w tym solidnym środowisku można także tworzyć dyrektywy niestandardowe.
Spis treści:
Czym są dyrektywy?
Dyrektywy to niestandardowe kody używane przez Angular do modyfikowania zachowania lub wyglądu elementu HTML. Możesz użyć dyrektyw, aby dodać detektory zdarzeń, zmienić DOM lub pokazać lub ukryć elementy.
W Angularze istnieją dwa typy dyrektyw wbudowanych: strukturalne i atrybutowe. Dyrektywy strukturalne zmieniają strukturę DOM, podczas gdy dyrektywy atrybutowe zmieniają wygląd lub zachowanie elementu. Dyrektywy są potężnym sposobem na rozszerzenie funkcjonalności komponentów Angular.
Korzyści z dyrektyw
Oto niektóre korzyści wynikające ze stosowania dyrektyw w Angular:
- Możliwość ponownego użycia: możesz używać dyrektyw w wielu komponentach, oszczędzając czas i wysiłek.
- Rozszerzalność: możesz rozszerzyć dyrektywy, aby dodać nowe funkcje, zwiększając wydajność komponentów.
- Elastyczność: Używając dyrektyw, możesz modyfikować zachowanie lub wygląd elementu na różne sposoby, co daje dużą elastyczność podczas tworzenia aplikacji.
Konfigurowanie aplikacji Angular
Aby skonfigurować aplikację Angular, zainstaluj Angular CLI, uruchamiając następujący kod w terminalu:
npm install -g @angular/cli
Po zainstalowaniu Angular CLI utwórz projekt Angular, uruchamiając następującą komendę:
ng new custom-directives-app
Uruchomienie powyższego polecenia spowoduje utworzenie projektu Angular o nazwie niestandardowe-dyrektywy-aplikacja.
Tworzenie dyrektywy niestandardowej
Teraz masz projekt Angular i możesz rozpocząć tworzenie własnych dyrektyw. Utwórz plik TypeScript i zdefiniuj klasę ozdobioną dekoratorem @Directive.
Dekorator @Directive to dekorator TypeScript używany do tworzenia niestandardowych dyrektyw. Teraz utwórz plik Highlight.directive.ts w katalogu src/app. W tym pliku utworzysz wyróżnienie dyrektywy niestandardowej.
Na przykład:
import { Directive } from "@angular/core";@Directive({
selector: "[myHighlight]",
})
export class HighlightDirective {
constructor() {}
}
Powyższy blok kodu importuje dekorator dyrektywy z modułu @angular/core. Dekorator @Directive dekoruje klasę HighlightDirective. Przyjmuje obiekt jako argument z właściwością selektora.
W tym przypadku ustawiasz właściwość selektora na [myHighlight] co oznacza, że możesz zastosować tę dyrektywę do swoich szablonów, dodając atrybut myHighlight do elementu.
Oto przykład użycia dyrektywy w szablonach:
<main>
<p myHighlight>Some text</p>
</main>
Dodanie zachowania do dyrektywy
Teraz pomyślnie utworzyłeś dyrektywę. Następnym krokiem jest dodanie zachowania do dyrektywy, aby mogła manipulować DOM. Będziesz potrzebował ElementRef z @angular/core, aby dodać zachowanie do dyrektywy.
Wstrzykniesz ElementRef do konstruktora dyrektywy. ElementRef to opakowanie wokół rodzimego elementu wewnątrz widoku.
Oto przykład dodania zachowania do dyrektywy:
import { Directive, ElementRef } from "@angular/core";@Directive({
selector: "[myHighlight]"
})
export class HighlightDirective {
constructor(private element: ElementRef) {
this.element.nativeElement.style.backgroundColor="lightblue";
}
}
W tym przykładzie konstruktor klasy HighlightDirective pobiera parametr ElementRef, który Angular automatycznie wstrzykuje. ElementRef zapewnia dostęp do bazowego elementu DOM.
Za pomocą właściwości this.element.nativeElement można uzyskać dostęp do natywnego elementu DOM parametru element. Następnie ustawiasz kolor tła komponentu na jasnoniebieski, używając właściwości style. Oznacza to, że dowolny element, do którego zastosujesz dyrektywę myHighlight, będzie miał jasnoniebieskie tło.
Aby dyrektywa działała, pamiętaj o jej zaimportowaniu i zadeklarowaniu w pliku app.module.ts.
Na przykład:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HighlightDirective } from './highlight.directive';
@NgModule({
declarations: [
AppComponent,
HighlightDirective,
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Teraz możesz zastosować dyrektywę myHighlight do elementów w komponentach Angular.
<main>
<p myHighlight>Some text</p>
</main>
Uruchom aplikację na serwerze programistycznym, aby sprawdzić, czy dyrektywa działa. Możesz to zrobić, uruchamiając następujące polecenie w terminalu:
ng serve
Po uruchomieniu polecenia przejdź do http://localhost:4200/ w przeglądarce internetowej, a zobaczysz interfejs wyglądający jak na obrazku poniżej.
Wbudowane dyrektywy Angulara akceptują wartości zmieniające wygląd elementu, ale niestandardowa dyrektywa myHighlight nie. Możesz skonfigurować dyrektywę tak, aby akceptowała wartość, której będzie używać do dynamicznego ustawiania koloru tła szablonu.
Aby to zrobić, zastąp kod w pliku Highlight.directive.ts następującym kodem:
import { Directive, ElementRef, Input } from "@angular/core";@Directive({
selector: "[myHighlight]"
})
export class HighlightDirective {
@Input() set myHighlight(color: string) {
this.element.nativeElement.style.backgroundColor = color;
}
constructor(private element: ElementRef) {
}
}
W powyższym bloku kodu klasa HighlightDirective zawiera metodę ustawiającą o nazwie myHighlight. Ta metoda pobiera parametr koloru typu string. Dekorujesz metodę settera dekoratorem @Input, umożliwiając przekazanie wartości koloru do dyrektywy z komponentu nadrzędnego.
Teraz możesz określić kolor tła, przekazując wartość do dyrektywy myHighlight.
Na przykład:
<main>
<p myHighlight="pink">Some text</p>
</main>
Tworzenie niestandardowej dyrektywy strukturalnej
W poprzednich sekcjach nauczyłeś się tworzyć, dodawać zachowania i stosować niestandardowe dyrektywy atrybutów do swojego szablonu. Dyrektywy atrybutowe zmieniają wygląd elementów DOM, podczas gdy dyrektywy strukturalne dodają, usuwają lub przesuwają elementy w DOM.
Angular udostępnia dwie dyrektywy strukturalne: ngFor i ngIf. Dyrektywa ngFor renderuje szablon dla każdego elementu w kolekcji (tablicy), podczas gdy ngIf obsługuje renderowanie warunkowe.
W tej sekcji utworzysz niestandardową dyrektywę strukturalną, która będzie działać jak dyrektywa ngIf. W tym celu utwórz plik warunek.dyrektywa.ts.
W pliku Condition.directive.ts wpisz następujący kod:
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'@Directive({
selector: "[condition]"
})
export class ConditionDirective {
@Input() set condition(arg: boolean) {
if(arg) {
this.viewContainer.createEmbeddedView(this.template)
} else {
this.viewContainer.clear();
}
}
constructor(
private template: TemplateRef<unknown>,
private viewContainer: ViewContainerRef
) {}
}
Ten blok kodu umożliwia warunkowe renderowanie elementów poprzez zastosowanie dyrektywy warunku do elementu i przekazanie wartości logicznej z komponentu nadrzędnego.
Do konstruktora klasy ConditionDirective wstrzykujesz instancję TemplateRef i ViewContainerRef. TemplateRef reprezentuje szablon skojarzony z dyrektywą, a ViewContainerRef reprezentuje kontener, w którym aplikacja renderuje widoki.
Metoda ustawiająca klasę ConditionDirective używa instrukcji if else do sprawdzania parametru arg. Dyrektywa tworzy osadzony widok przy użyciu dostarczonego szablonu, jeśli parametr ma wartość true. Metoda createEmbeddedView klasy ViewContainerRef tworzy i renderuje widok w DOM.
Jeśli parametr ma wartość false, dyrektywa czyści kontener widoku przy użyciu metody clear klasy ViewContainerRef. Spowoduje to usunięcie wszelkich wcześniej wyrenderowanych widoków z modelu DOM.
Po utworzeniu dyrektywy zarejestruj ją w swoim projekcie importując ją i deklarując w pliku app.module.ts. Po wykonaniu tej czynności możesz zacząć używać dyrektywy w swoich szablonach.
Oto przykład użycia go w szablonach:
<main>
<p *condition="true">Hello There!!!</p>
</main>
Teraz możesz tworzyć niestandardowe dyrektywy
Niestandardowe dyrektywy w Angular zapewniają potężny sposób manipulowania DOM i dodawania dynamicznego zachowania do szablonów. Nauczyłeś się, jak tworzyć i stosować niestandardowe atrybuty i dyrektywy strukturalne w aplikacjach Angular. Rozumiejąc, jak tworzyć i używać niestandardowych dyrektyw, możesz w pełni wykorzystać możliwości Angulara.