Jak tworzyć niestandardowe dyrektywy w Angular

Jedną z kluczowych funkcji Angular są dyrektywy. Dyrektywy Angular są sposobem na dodanie zachowania do elementów DOM. Angular zapewnia wiele wbudowanych dyrektyw, a w tym solidnym frameworku można również tworzyć własne dyrektywy.

Czym są dyrektywy?

Dyrektywy w Angular to wyspecjalizowane konstrukcje kodu zaprojektowane w celu wpływania na prezentację i interaktywność elementów HTML za pomocą różnych środków, takich jak modyfikowanie obiektowego modelu dokumentu (DOM), dodawanie obsługi zdarzeń lub kontrolowanie widoczności. Dyrektywy te pozwalają programistom skutecznie manipulować interfejsem użytkownika, określając pożądane zmiany w samej składni szablonu.

Dyrektywy strukturalne w Angular modyfikują układ obiektowego modelu dokumentu (DOM), podczas gdy dyrektywy atrybutów wpływają na aspekt wizualny lub funkcje poszczególnych elementów w szablonie. Dyrektywy te oferują solidne środki do zwiększania możliwości aplikacji Angular, umożliwiając programistom łatwe dostosowywanie i manipulowanie znacznikami HTML.

Zalety dyrektyw

Wykorzystanie dyrektyw w Angular oferuje szereg korzyści, w tym większą elastyczność i kontrolę nad zachowaniem komponentów, a także lepszą modułowość i organizację kodu. Wykorzystując dyrektywy, programiści mogą tworzyć niestandardowe zachowania dla komponentów, które wykraczają poza podstawowe atrybuty HTML lub haki cyklu życia, pozwalając na większą ekspresję i szczegółową kontrolę nad interakcjami interfejsu użytkownika. Dodatkowo, dyrektywy umożliwiają lepszą hermetyzację i separację zagadnień w aplikacji, promując możliwość ponownego użycia i łatwość konserwacji w różnych częściach projektu. Ogólnie rzecz biorąc, dyrektywy odgrywają istotną rolę w kształtowaniu struktury i funkcjonalności aplikacji Angular, zapewniając programistom potężne narzędzia do efektywnego tworzenia złożonych interfejsów użytkownika i doświadczeń użytkownika.

Możliwość ponownego użycia jest kluczową cechą dyrektyw, która pozwala na ich wykorzystanie w wielu komponentach, co skutkuje zwiększoną wydajnością poprzez redukcję redundancji i promowanie spójności w całym projekcie.

Rozszerzalność dyrektyw pozwala na dodawanie nowych funkcji do komponentów, zwiększając tym samym ich możliwości i poprawiając ogólną wydajność.

Wszechstronność oferowana przez dyrektywy pozwala na manipulowanie i dostosowywanie właściwości i akcji elementów, zapewniając programistom dużą swobodę twórczą w efektywnym konstruowaniu aplikacji.

Konfigurowanie aplikacji Angular

Aby utworzyć projekt Angular, wykonaj następujące polecenie w terminalu, aby zainstalować Angular Command Line Interface (CLI):

 npm install -g @angular/cli

Po zainstalowaniu Angular Command Line Interface (CLI) można utworzyć projekt Angular za pomocą następującego polecenia:

 ng new custom-directives-app

Wykonanie powyższej instrukcji spowoduje wygenerowanie aplikacji Angular o nazwie “custom-directives-app”.

Tworzenie niestandardowej dyrektywy

Aby utworzyć niestandardowe dyrektywy w projekcie Angular, należy najpierw utworzyć plik TypeScript i wyznaczyć klasę ozdobioną dekoratorem dyrektywy.

Dekorator @Directive jest funkcją języka TypeScript, która umożliwia tworzenie niestandardowych dyrektyw. Aby zaimplementować tę funkcjonalność, utworzymy plik highlight.directive.ts w katalogu src/app . W tym pliku skonstruujemy niestandardową dyrektywę znaną jako highlight .

Na przykład:

 import { Directive } from "@angular/core";

@Directive({
  selector: "[myHighlight]",
})
export class HighlightDirective {
  constructor() {}
}

Zaimportowana dyrektywa pochodzi z podstawowego modułu Angular i jest ozdobiona za pomocą dekoratora @Directive , który przyjmuje argument składający się z reprezentacji obiektowej z atrybutem selector .

W tym przypadku ustawienie właściwości selektora na “[myHighlight]” umożliwia zastosowanie tej dyrektywy do szablonów poprzez dołączenie atrybutu “myHighlight” do określonego elementu.

Włączenie dyrektywy do struktury szablonu można osiągnąć w następujący sposób:

 <main>
 <p myHighlight>Some text</p>
</main>

Dodanie zachowania do dyrektywy

Aby manipulować obiektowym modelem dokumentu (DOM) za pomocą dyrektywy, należy najpierw utworzyć tę dyrektywę i uzyskać instancję ElementRef z pakietu @angular/core . To odniesienie służy jako środek do dołączania zachowań do elementów w szablonie.

Aby wykorzystać ElementRef w dyrektywie, musi on zostać włączony do funkcji konstruktora tej dyrektywy. ElementRef służy jako enkapsulacja dla natywnego elementu znajdującego się w określonym punkcie widzenia.

Oczywiście, oto ilustracja, która demonstruje proces dołączania zachowania do dyrektywy w Angular:

 import { Directive, ElementRef } from "@angular/core";

@Directive({
    selector: "[myHighlight]"
})
export class HighlightDirective {
    constructor(private element: ElementRef) {
        this.element.nativeElement.style.backgroundColor = 'lightblue';
    }
}

Konstruktor klasy HighlightDirective przyjmuje parametr ElementRef, który jest automatycznie dostarczany przez Angular. Ten ElementRef zapewnia dostęp do odpowiedniego elementu DOM.

Wykorzystując właściwość this.element.nativeElement , można uzyskać dostęp do oryginalnego elementu DOM reprezentowanego przez parametr element . Następnie, wykorzystując właściwość style , można przypisać jasnoniebieski odcień jako kolor tła dla danego komponentu. W rezultacie każdy element, do którego zostanie zastosowana dyrektywa myHighlight , będzie miał błękitne tło.

Aby dyrektywa działała, konieczne jest zaimportowanie i jawne zadeklarowanie jej obecności 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 { }

Możesz teraz użyć dyrektywy myHighlight na elementach składowych w komponentach Angular.

 <main>
 <p myHighlight>Some text</p>
</main>

Aby ocenić funkcjonalność konkretnej dyrektywy w aplikacji, zaleca się wdrożenie i uruchomienie aplikacji na wyznaczonym serwerze programistycznym za pomocą interfejsu wiersza poleceń. Aby zainicjować ten proces, należy przejść do odpowiedniego katalogu, w którym znajduje się terminal i wprowadzić określone polecenie do wykonania. Pozwoli to zweryfikować, czy dyrektywa działa zgodnie z przeznaczeniem.

 ng serve

Po wykonaniu podanej instrukcji uprzejmie prosimy o skierowanie przeglądarki internetowej na " http://localhost:4200/ " w celu uzyskania dostępu do interfejsu użytkownika, który jest uderzająco podobny do przedstawionej poniżej reprezentacji wizualnej.

Natywne dyrektywy Angulara pozwalają na modyfikowanie wyglądu elementu poprzez akceptowanie określonych wartości, jednak ta funkcjonalność nie jest rozszerzona na niestandardowe dyrektywy, takie jak “myHighlight”. Aby naprawić to ograniczenie, można zaimplementować opcję konfiguracji w dyrektywie niestandardowej, która umożliwia dynamiczną modyfikację koloru tła szablonu na podstawie podanej wartości.

Aby zmodyfikować zachowanie dyrektywy highlight w Angular, można zastąpić zawartość pliku highlight.directive.ts dostarczonym szablonem. Spowoduje to inne renderowanie elementów HTML, które są dopasowane przez selektor dyrektywy.

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

Dostarczony kod demonstruje implementację klasy HighlightDirective w Angular, która posiada metodę ustawiającą o nazwie “myHighlight”. Wspomniana metoda przyjmuje pojedynczy parametr wejściowy typu danych string i jest ozdobiona dekoratorem Input, umożliwiając jej odbiór wspomnianej wartości koloru z komponentu nadzorującego.

Można teraz określić żądany kolor tła dla elementu z atrybutem myHighlight , podając jego wartość.

Na przykład:

 <main>
 <p myHighlight='pink'>Some text</p>
</main>

Tworzenie niestandardowej dyrektywy strukturalnej

W poprzednich fragmentach zostałeś poinstruowany o procesie konstruowania, nasycania akcji i wdrażania spersonalizowanych dyrektyw atrybutów w szablonie. Dyrektywy atrybutów zmieniają wizualną prezentację komponentów DOM, podczas gdy dyrektywy strukturalne modyfikują kompozycję elementów w DOM poprzez ich dodawanie, usuwanie lub zmianę ich położenia.

Angular oferuje dwie podstawowe dyrektywy strukturalne, a mianowicie ngFor i ngIf . Pierwsza z nich iteruje przez tablicę elementów i wyświetla odpowiedni szablon dla każdego elementu, podczas gdy druga jest odpowiedzialna za warunkowe renderowanie elementów w oparciu o określone kryteria.

W tym segmencie opracujemy dostosowaną dyrektywę strukturalną, która wykazuje podobną funkcjonalność do dyrektywy ngIf . Aby to osiągnąć, utworzymy plik condition.directive.ts .

W plikucondition.directive.ts napisz ten 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

) {}
}

Niniejszy fragment kodu umożliwia warunkową ekspozycję komponentów poprzez zastosowanie “warunku” kierującego do elementu, któremu towarzyszy przekazanie wartości logicznej z komponentu obejmującego.

a TemplateRef i a ViewContainerRef . Pierwszy służy jako odniesienie do szablonu powiązanego z dyrektywą, podczas gdy drugi reprezentuje kontekst renderowania widoku, w którym będą renderowane widoki dyrektyw.

ConditionDirective wykorzystuje wyrażenie warunkowe, zaimplementowane za pomocą instrukcji if-else , aby ocenić zalety otrzymanego argumentu. Jeśli wspomniane dane wejściowe okażą się prawidłowe, konstrukt wygeneruje załączoną perspektywę, wykorzystując określony szablon projektu przy pomocy metodologii createEmbeddedView() nieodłącznie związanej z ViewContainerRef . Następnie funkcja renderView() powiązana z tą instancją kontenera zorganizuje włączenie nowo utworzonego punktu widzenia do obiektowego modelu dokumentu (DOM) przeglądarki.

Jeśli określony warunek nie zostanie spełniony, polecenie wykorzystuje metodę clear() ViewContainerRef, aby usunąć wszystkie wcześniejsze renderowania w kontenerze widoku z dokumentu.

Włączenie dyrektywy wymaga zaimportowania i potwierdzenia jej obecności w pliku modułu aplikacji. Po wykonaniu tej czynności staje się ona dostępna do użycia w konstrukcjach szablonów.

Włączenie rozszerzenia do szablonu można osiągnąć poprzez włączenie dostarczonego fragmentu kodu, jak pokazano poniżej:

 <main>
 <p *condition="true">Hello There!!!</p>
</main>

Teraz możesz tworzyć niestandardowe dyrektywy

Niestandardowe dyrektywy Angular oferują potężny sposób wpływania na obiektowy model dokumentu (DOM) i nadawania dynamicznej funkcjonalności w strukturach szablonów. Po zapoznaniu się z tworzeniem i stosowaniem niestandardowych atrybutów i dyrektyw strukturalnych, jesteś teraz przygotowany do pełnego wykorzystania potencjału Angular.