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 i katalogen app och lägger till den nya direktivfilen i den:

• 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 i completed-ingången implementerar vi OnChanges-gränssnittet:

Vi definierar också 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:

Metoden ngOnChanges utlöses när Angular upptäcker förändringar i direktivets input-egenskaper.

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 ram och en ljusgrön bakgrund på elementet. Om det är false tas dessa stilar bort, vilket återställer elementets ursprungliga utseende. Detta ger en visuell indikation på slutförda uppgifter.

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