Angular leveres med et sett innebygde direktiver som ngIf, ngFor og ngClass. Du kan imidlertid også lage dine egne egendefinerte direktiver for å håndtere spesifikke oppgaver i applikasjonen din. La oss gå gjennom hvordan du bygger et slikt med et praktisk eksempel.

Generere det egendefinerte direktivet

Først er det god praksis å organisere koden ved å opprette en egen mappe for direktivene dine. La oss kalle den directives.

Denne kommandoen oppretter en ny mappe kalt directives inne i app-katalogen og legger til den nye direktivfilen i denne:

• highlight-on-complete.directive.ts – inneholder logikken til direktivet;

• highlight-on-complete.directive.spec.ts – enhetstestfil (kan slettes hvis den ikke trengs).

Her er hvordan den grunnleggende strukturen til direktivet ser ut:

Definer hva direktivet skal gjøre

Dette direktivet vil fremheve et oppgaveelement i grønt hvis det er markert som fullført. Ellers vil det fjerne stilene.

For å fortelle Angular at denne klassen er et direktiv, dekorerer vi den med @Directive:

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

Selektoren [appHighlightOnComplete] betyr at direktivet vil bli brukt som et attributt, ikke som et tagg eller strukturelt direktiv.

I HTML-en din vil du bruke det slik:

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

Få direktivet til å reagere på endringer

For å oppdage endringer på completed-inngangen, implementerer vi OnChanges-grensesnittet:

Vi definerer også en input-egenskap for å motta verdien fra komponenten:

Hva dette gjør:

• Informerer Angular om at verdien vil bli levert fra malen (tidligere sendte vi task.complete fra malen);

• Binder direktivets interne completed-egenskap til verdien som sendes inn fra malen;

• Setter en standardverdi på true (som vil bli overstyrt når faktiske data mottas).

Sikker tilgang til DOM

Angular bruker avhengighetsinjeksjon for å gi tilgang til DOM og verktøy for gjengivelse.

I konstruktøren injiserer vi:

ElementRef gir oss en referanse til vertens DOM-element. Renderer2 lar oss trygt endre stiler og attributter uten å manipulere DOM direkte.

Reagere på endringer med ngOnChanges

Nå skal vi implementere hovedlogikken i ngOnChanges, som kjøres hver gang input-verdien endres.

Full implementasjon:

Metoden ngOnChanges utløses hver gang Angular oppdager endringer i direktivets input-egenskaper.

I dette tilfellet reagerer den på oppdateringer av verdien completed som sendes fra malen. Hvis completed er true, legger direktivet til en grønn kant og en lysegrønn bakgrunn på elementet. Hvis den er false, fjernes disse stilene, og elementet får tilbake sitt opprinnelige utseende. Dette gir en visuell indikasjon på fullførte oppgaver.

Dette egendefinerte direktivet lar deg kapsle inn stilatferd på en gjenbrukbar og ryddig måte. Du kan nå bruke det på hvilket som helst element i appen din, uten å duplisere logikk på tvers av komponenter. Det er et godt eksempel på hvordan Angulars direktivsystem kan hjelpe deg å skrive mer modulær og vedlikeholdbar kode.