Niestandardowe dyrektywy Angulara oferują solidny mechanizm modyfikowania DOM i włączania dynamicznego zachowania do szablonów.

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.

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.

Istnieją dwa rodzaje wbudowane dyrektywy w Angular, 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.
    • instagram viewer
  • Rozciągliwość: 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 zapewnia 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 aplikacja-niestandardowych dyrektyw.

Tworzenie dyrektywy niestandardowej

Teraz masz projekt Angular i możesz rozpocząć tworzenie własnych dyrektyw. Utwórz plik TypeScript i zdefiniuj klasę ozdobioną @Dyrektywa dekorator.

The @Dyrektywa dekorator to dekorator TypeScript używany do tworzenia niestandardowych dyrektyw. Teraz utwórz podświetlenie.dyrektywa.ts plik w źródło/aplikacja informator. W tym pliku utworzysz dyrektywę niestandardową atrakcja.

Na przykład:

import { Directive } from"@angular/core";
@Directive({
 selector: "[myHighlight]",
})
exportclassHighlightDirective{
constructor() {}
}

Powyższy blok kodu importuje plik Dyrektywa dekorator z @kątowy/rdzeń moduł. The @Dyrektywa dekorator ozdabia Wyróżnij dyrektywę klasa. Przyjmuje obiekt jako argument z a selektor nieruchomość.

W tym przypadku ustawiasz selektor własność do [mojeWyróżnienie] co oznacza, że ​​możesz zastosować tę dyrektywę do swoich szablonów, dodając rozszerzenie moje wyróżnienie atrybut elementu.

Oto przykład użycia dyrektywy w szablonach:


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]"
})
exportclassHighlightDirective{
constructor(private element: ElementRef) {
this.element.nativeElement.style.backgroundColor = 'lightblue';
 }
}

W tym przykładzie konstruktor Wyróżnij dyrektywę class pobiera parametr ElementRef, który Angular automatycznie wstrzykuje. ElementRef zapewnia dostęp do bazowego elementu DOM.

Za pomocą ten.element.nativeElement uzyskujesz dostęp do natywnego elementu DOM pliku element parametr. Następnie ustawiasz kolor tła komponentu na jasny niebieski używając styl nieruchomość. Oznacza to, że niezależnie od zastosowanego elementu moje wyróżnienie dyrektywa będzie miała jasnoniebieskie tło.

Aby dyrektywa działała, upewnij się, że zaimportowałeś ją i zadeklarowałeś w pliku moduł.aplikacji.ts plik.

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]
})
exportclassAppModule{ }

Teraz możesz zastosować dyrektywę myHighlight do elementów w komponentach Angular.


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 Angular akceptują wartości zmieniające wygląd elementu, ale dyrektywa niestandardowa moje wyróżnienie 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ć, zamień kod w pliku podświetlenie.dyrektywa.ts plik z tym:

import { Directive, ElementRef, Input } from"@angular/core";
@Directive({
 selector: "[myHighlight]"
})


exportclassHighlightDirective{
 @Input() set myHighlight(color: string) {
this.element.nativeElement.style.backgroundColor = color;
 }
constructor(private element: ElementRef) { 
 }
}

W powyższym bloku kodu plik Wyróżnij dyrektywę klasa zawiera metodę ustawiającą o nazwie moje wyróżnienie. Ta metoda wymaga a kolor parametr typu string. Dekorujesz metodę ustawiającą za pomocą @Wejście dekorator, 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:


'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 metoda ngIf obsługuje renderowanie warunkowe.

W tej sekcji utworzysz niestandardową dyrektywę strukturalną, która będzie działać jak dyrektywa ngIf dyrektywa. Aby to zrobić, utwórz plik dyrektywa.ts.stanu plik.

w dyrektywa.ts.stanu plik, napisz ten kod:

import { Directive, Input, TemplateRef, ViewContainerRef } from'@angular/core'
@Directive({
 selector: "[condition]"
})


exportclassConditionDirective{


 @Input() set condition(arg: boolean) {
if(arg) {
this.viewContainer.createEmbeddedView(this.template)
 } else {
this.viewContainer.clear();
 }
 }
constructor(
 private template: TemplateRef, 
 private viewContainer: ViewContainerRef 
 ) {}
}

Ten blok kodu umożliwia warunkowe renderowanie elementów poprzez zastosowanie metody stan dyrektywę do elementu i przekazanie wartości logicznej z komponentu nadrzędnego.

W konstruktorze Dyrektywa Warunkowa class, wstrzykujesz instancję SzablonRef I ZobaczkontenerRef. 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. The utwórzEmbeddedView metoda klasy ViewContainerRef tworzy i renderuje widok w DOM.

Jeśli parametrem jest FAŁSZ, dyrektywa czyści kontener widoku za pomocą jasne metoda 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 i deklarując w pliku moduł.aplikacji.ts plik. Po wykonaniu tej czynności możesz zacząć używać dyrektywy w swoich szablonach.

Oto przykład użycia go w szablonach:


"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.