Angular leveres med et sæt indbyggede direktiver som ngIf, ngFor og ngClass. Du kan dog også oprette dine egne brugerdefinerede direktiver til at håndtere specifikke opgaver i din applikation. Her gennemgår vi, hvordan du bygger et med et praktisk eksempel.

Generering af brugerdefineret direktiv

Det er god praksis at organisere din kode ved at oprette en dedikeret mappe til dine direktiver. Lad os kalde den directives.

Denne kommando opretter en ny mappe med navnet directives inde i app-mappen og tilføjer den nye direktivfil deri:

• highlight-on-complete.directive.ts – indeholder direktivets logik;

• highlight-on-complete.directive.spec.ts – enhedstestfil (kan slettes, hvis den ikke er nødvendig).

Her er, hvordan den grundlæggende struktur for direktivet ser ud:

Definer, hvad direktivet skal gøre

Dette direktiv vil fremhæve et opgaveelement i grønt, hvis det er markeret som fuldført. Ellers fjernes stilen.

For at fortælle Angular, at denne klasse er et direktiv, dekoreres den med @Directive:

@Directive({
  selector: '[appHighlightOnComplete]'
})

Selektoren [appHighlightOnComplete] betyder, at direktivet vil blive brugt som et attribut, ikke som et tag eller strukturelt direktiv.

I din HTML anvendes det således:

<div [appHighlightOnComplete]="task.completed"></div>

Få direktivet til at reagere på ændringer

For at registrere ændringer på completed-input implementeres OnChanges-interfacet:

Vi definerer også en input-egenskab til at modtage værdien fra komponenten:

Dette gør følgende:

• Informerer Angular om, at værdien vil blive leveret fra skabelonen (tidligere sendte vi task.complete fra skabelonen);

• Binder direktivets interne completed-egenskab til den værdi, der sendes ind fra skabelonen;

• Angiver en standardværdi på true (som vil blive overskrevet, når de faktiske data modtages).

Sikker adgang til DOM'en

Angular anvender afhængighedsinjektion for at give adgang til DOM'en og renderingsværktøjer.

I konstruktøren injiceres:

ElementRef giver os en reference til værtens DOM-element. Renderer2 gør det muligt sikkert at ændre stilarter og attributter uden at manipulere DOM'en direkte.

Reagér på ændringer med ngOnChanges

Nu implementerer vi hovedlogikken i ngOnChanges, som kører, hver gang inputværdien ændres.

Fuld implementering:

Metoden ngOnChanges aktiveres, når Angular registrerer ændringer i direktivets input-egenskaber.

I dette tilfælde reagerer den på opdateringer af værdien completed, som overføres fra skabelonen. Hvis completed er true, tilføjer direktivet en grøn kant og en lysegrøn baggrund til elementet. Hvis den er false, fjernes disse stilarter, og elementet vender tilbage til dets oprindelige udseende. Dette giver en visuel indikation af fuldførte opgaver.

Dette brugerdefinerede direktiv gør det muligt at kapsle stiladfærd ind på en genanvendelig og overskuelig måde. Du kan nu anvende det på ethvert element i din app uden at duplikerer logik på tværs af komponenter. Det er et godt eksempel på, hvordan Angulars direktivsystem kan hjælpe dig med at skrive mere modulær og vedligeholdelsesvenlig kode.