Niestandardowe dyrektywy w Angularze

Dyrektywy umożliwiają rozszerzanie kodu HTML. W tej lekcji poznają Państwo niestandardowe dyrektywy i dowiedzą się, jak je tworzyć.

Czym jest dyrektywa?

Dyrektywy zmieniają wygląd lub zachowanie elementów DOM. Angular udostępnia wbudowane dyrektywy, takie jak *ngIf i *ngFor.

Rodzaje dyrektyw

• Dyrektywy komponentów
• Dyrektywy atrybutów - zmieniają wygląd lub zachowanie
• Dyrektywy strukturalne - zmieniają układ, na przykład *ngIf

Tworzenie dyrektywy atrybutu

Dyrektywę należy utworzyć za pomocą Angular CLI:

ng generate directive highlight

ng generate directive highlight

Stosowanie dyrektywy

Dyrektywy należy użyć jako atrybutu w szablonie:

<p appHighlight>Highlighted Text</p>

<p appHighlight>Highlighted Text</p>

Logika dyrektywy

Dyrektywy zawierają logikę, która zmienia elementy DOM. Można na przykład dynamicznie ustawiać kolor tła.

constructor(private el: ElementRef) {
  this.el.nativeElement.style.backgroundColor = 'yellow';
}

Dekorator @HostListener

Za pomocą @HostListener można reagować na zdarzenia elementów, do których zastosowano dyrektywę:

@HostListener('mouseenter') onMouseEnter() {
  this.highlight('blue');
}

@Input() w dyrektywach

@Input() umożliwia przekazywanie danych do dyrektyw z poziomu szablonów:

@Input() defaultColor: string;

Podsumowanie

Poznali Państwo sposób tworzenia i używania niestandardowych dyrektyw w celu rozszerzania aplikacji Angular. Świetna praca!