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 med et praktisk eksempel.

Generere det egendefinerte direktivet

Det er god praksis å organisere koden ved å opprette en egen mappe for direktiver. 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 markere et oppgaveelement i grønt hvis det er merket som fullført. Ellers vil det fjerne stilene.

For å angi for Angular at denne klassen er et direktiv, dekoreres 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 i 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 til 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å implementeres 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 går tilbake til 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.