Angular levereras med en uppsättning inbyggda direktiv som ngIf, ngFor och ngClass. Du kan dock även skapa egna anpassade direktiv för att hantera specifika uppgifter i din applikation. Här går vi igenom hur du bygger ett sådant med ett praktiskt exempel.

Generera det anpassade direktivet

Det är god praxis att organisera din kod genom att skapa en dedikerad mapp för dina direktiv. Låt oss kalla den directives.

Detta kommando skapar en ny mapp med namnet directives inuti katalogen app och lägger till den nya direktivfilen där:

• highlight-on-complete.directive.ts – innehåller direktivets logik;

• highlight-on-complete.directive.spec.ts – enhetstestfil (kan tas bort om den inte behövs).

Här är hur den grundläggande strukturen för direktivet ser ut:

Definiera vad direktivet ska göra

Detta direktiv markerar ett uppgiftselement i grönt om det är markerat som slutfört. Annars tas stilarna bort.

För att tala om för Angular att denna klass är ett direktiv, dekoreras den med @Directive:

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

Selektorn [appHighlightOnComplete] innebär att direktivet kommer att användas som ett attribut, inte som en tagg eller strukturellt direktiv.

I din HTML tillämpar du det så här:

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

Få direktivet att reagera på förändringar

För att upptäcka förändringar på completed-ingången implementerar vi OnChanges-gränssnittet:

Vi definierar även en input-egenskap för att ta emot värdet från komponenten:

Vad detta gör:

• Informerar Angular om att värdet kommer att tillhandahållas från mallen (tidigare skickade vi task.complete från mallen);

• Binder direktivets interna completed-egenskap till värdet som skickas in från mallen;

• Anger ett standardvärde på true (vilket kommer att skrivas över när faktisk data tas emot).

Säker åtkomst till DOM

Angular använder beroendeinjektion för att ge åtkomst till DOM och renderingsverktyg.

I konstruktorn injicerar vi:

ElementRef ger oss en referens till värd-HTML-elementet. Renderer2 gör det möjligt att säkert ändra stilar och attribut utan att direkt manipulera DOM:en.

Reagera på förändringar med ngOnChanges

Nu implementerar vi huvudlogiken i ngOnChanges, som körs varje gång inmatningsvärdet ändras.

Fullständig implementation:

ngOnChanges-metoden utlöses när Angular upptäcker förändringar i direktivets inmatningsegenskaper.

I detta fall reagerar den på uppdateringar av värdet completed som skickas från mallen. Om completed är true lägger direktivet till en grön kant och en ljusgrön bakgrund på elementet. Om det är false tas dessa stilar bort, vilket återställer elementet till dess ursprungliga utseende. Detta ger en visuell indikation på slutförda uppgifter.

Detta anpassade direktiv gör att du kan kapsla in stilbeteende på ett återanvändbart och rent sätt. Du kan nu tillämpa det på valfritt element i din app utan att duplicera logik mellan komponenter. Det är ett utmärkt exempel på hur Angulars direktivsystem kan hjälpa dig att skriva mer modulär och underhållbar kod.