Lag tilpassede direktiver i Angular: En komplett guide

Introduksjon til Angular-direktiver

En kjernefunksjon i Angular er bruken av direktiver. Disse direktivene gjør det mulig å legge til spesifikk oppførsel i DOM-elementer. Angular har et sett med innebygde direktiver, men det fleksible rammeverket tillater også utviklere å lage egne tilpassede varianter.

Hva er Direktiver?

Direktiver kan betraktes som skreddersydde kodesnutter som Angular bruker for å endre hvordan et HTML-element oppfører seg eller ser ut. Du kan bruke direktiver til å legge til hendelseslyttere, modifisere DOM-strukturen, eller til å vise eller skjule elementer på dynamisk vis.

Angular skiller mellom to hovedtyper av innebygde direktiver: strukturelle og attributt-direktiver. Strukturelle direktiver endrer selve strukturen i DOM, for eksempel ved å legge til eller fjerne elementer. Attributt-direktiver, derimot, påvirker utseendet eller oppførselen til et eksisterende element. Direktiver gir en effektiv metode for å utvide funksjonaliteten til Angular-komponenter.

Fordeler med å bruke Direktiver

Direktiver i Angular tilbyr flere betydelige fordeler:

• Gjenbruk: Direktiver kan benyttes på tvers av forskjellige komponenter, noe som gir økt effektivitet og tidsbesparelser.
• Utvidbarhet: Direktiver kan utvides med ny funksjonalitet, noe som gjør komponentene mer allsidige og kraftige.
• Fleksibilitet: Ved å bruke direktiver kan du endre oppførselen eller utseendet til et element på mange måter, noe som gir stor frihet i utviklingen av applikasjoner.

Oppsett av en Angular-applikasjon

For å begynne å bruke Angular, må du installere Angular CLI. Dette gjøres ved å kjøre følgende kommando i terminalen:

npm install -g @angular/cli

Etter installasjonen av Angular CLI kan du opprette et nytt Angular-prosjekt med denne kommandoen:

ng new custom-directives-app

Denne kommandoen oppretter et prosjekt med navnet «custom-directives-app».

Opprettelse av et Egendefinert Direktiv

Med et fungerende Angular-prosjekt, kan du nå begynne å utvikle dine egne direktiver. Dette starter med å opprette en TypeScript-fil og definere en klasse som er dekorert med «@Directive»-dekoratoren.

«@Directive»-dekoratoren er en TypeScript-dekorator som brukes til å definere egendefinerte direktiver. Opprett en fil med navnet «highlight.directive.ts» i mappen «src/app». I denne filen implementerer du et tilpasset direktiv for å fremheve elementer.

Eksempelkode for å starte et direktiv:

import { Directive } from "@angular/core";

@Directive({
  selector: "[myHighlight]",
})
export class HighlightDirective {
  constructor() {}
}
    

Koden ovenfor importerer «@Directive»-dekoratoren fra «@angular/core»-modulen. «@Directive»-dekoratoren knyttes til «HighlightDirective»-klassen. Den tar et objekt som argument med en «selector»-egenskap.

I dette tilfellet settes «selector»-egenskapen til «[myHighlight]». Dette betyr at du kan bruke direktivet i HTML-malene ved å legge til attributtet «myHighlight» til et hvilket som helst element.

Eksempel på bruk av direktivet i en mal:

<main>
  <p myHighlight>En tekst som skal fremheves</p>
</main>
    

Legge til Funksjonalitet i Direktivet

Når et direktiv er opprettet, er neste trinn å legge til funksjonalitet slik at det kan manipulere DOM. For å gjøre dette, trenger du «ElementRef» fra «@angular/core».

«ElementRef» injiseres i direktivets konstruktør. «ElementRef» gir tilgang til det underliggende DOM-elementet i en visning.

Her er et eksempel på hvordan du legger til funksjonalitet i et direktiv:

import { Directive, ElementRef } from "@angular/core";

@Directive({
  selector: "[myHighlight]"
})
export class HighlightDirective {
  constructor(private element: ElementRef) {
    this.element.nativeElement.style.backgroundColor="lightblue";
  }
}
    

I dette eksemplet tar konstruktøren av «HighlightDirective»-klassen en «ElementRef»-parameter. Angular sørger for at denne referansen injiseres automatisk. «ElementRef» gir deg direkte tilgang til DOM-elementet.

Gjennom «this.element.nativeElement»-egenskapen får du tilgang til det faktiske DOM-elementet. Deretter setter du bakgrunnsfargen til lys blå med «style»-egenskapen. Dette betyr at hvert element som benytter «myHighlight»-direktivet, vil få en lys blå bakgrunn.

For at direktivet skal fungere, må du importere det og deklarere det i «app.module.ts»-filen.

For eksempel:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HighlightDirective } from './highlight.directive';

@NgModule({
  declarations: [
    AppComponent,
    HighlightDirective,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
    

Nå kan du bruke «myHighlight»-direktivet i dine Angular-komponenter.

Eksempel på bruk i en mal:

<main>
  <p myHighlight>Denne teksten er lys blå.</p>
</main>
    

Kjør applikasjonen på utviklingsserveren for å teste at direktivet fungerer. Dette gjøres med denne kommandoen i terminalen:

ng serve

Etter kommandoen er utført, gå til «http://localhost:4200/» i nettleseren. Du vil se at teksten du har merket med direktivet, nå har en lys blå bakgrunn. Se eksempelet under.

Innebygde direktiver i Angular kan akseptere verdier for å endre elementets utseende. Det egendefinerte direktivet «myHighlight» gjør det ikke i utgangspunktet. Du kan imidlertid konfigurere direktivet til å akseptere en verdi som brukes dynamisk for å sette bakgrunnsfarge.

For å gjøre dette, erstatt koden i «highlight.directive.ts» med denne:

import { Directive, ElementRef, Input } from "@angular/core";

@Directive({
  selector: "[myHighlight]"
})

export class HighlightDirective {
  @Input() set myHighlight(color: string) {
    this.element.nativeElement.style.backgroundColor = color;
  }

  constructor(private element: ElementRef) {
  }
}
    

I kodeblokken over inneholder «HighlightDirective»-klassen en setter-metode kalt «myHighlight». Denne metoden aksepterer en farge-parameter som er av typen «string». Setter-metoden er dekorert med «@Input»-dekoratoren, slik at fargeverdien kan sendes inn til direktivet fra den overordnede komponenten.

Nå kan bakgrunnsfargen bestemmes ved å sende en verdi til «myHighlight»-direktivet.

Eksempel:

<main>
  <p myHighlight="pink">Denne teksten har rosa bakgrunn.</p>
</main>
    

Opprettelse av et Egendefinert Strukturelt Direktiv

Tidligere har du lært å opprette, legge til funksjonalitet og bruke egendefinerte attributtdirektiver. Attributtdirektiver endrer utseendet til eksisterende DOM-elementer, mens strukturelle direktiver, som vi ser på nå, brukes til å legge til, fjerne eller flytte elementer i DOM.

Angular har to innebygde strukturelle direktiver: «ngFor» og «ngIf». «ngFor»-direktivet gjengir en mal for hvert element i en samling, mens «ngIf» håndterer betinget gjengivelse.

I denne delen skal du opprette et eget strukturelt direktiv som ligner på «ngIf». For å gjøre dette, opprett en fil med navnet «condition.directive.ts».

I «condition.directive.ts»-filen, legg til følgende kode:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'

@Directive({
  selector: "[condition]"
})

export class ConditionDirective {

  @Input() set condition(arg: boolean) {
    if(arg) {
      this.viewContainer.createEmbeddedView(this.template)
    } else {
      this.viewContainer.clear();
    }
  }

  constructor(
    private template: TemplateRef<unknown>,
    private viewContainer: ViewContainerRef
  ) {}
}
    

Denne koden gjør det mulig å betinget gjengi elementer ved å bruke «condition»-direktivet og sende en boolsk verdi fra den overordnede komponenten.

I konstruktøren til «ConditionDirective»-klassen injiseres en instans av «TemplateRef» og «ViewContainerRef». «TemplateRef» representerer malen som direktivet er knyttet til, og «ViewContainerRef» representerer beholderen der applikasjonen gjengir visninger.

Setter-metoden «ConditionDirective» bruker en if-else-setning for å sjekke «arg»-parameteren. Direktivet oppretter en innebygd visning ved å bruke den gitte malen hvis parameteren er sann. «createEmbeddedView»-metoden til «ViewContainerRef»-klassen brukes til å opprette og gjengi visningen i DOM.

Hvis parameteren er usann, fjerner direktivet alle tidligere gjengitte visninger fra DOM med «clear»-metoden til «ViewContainerRef»-klassen.

Etter å ha opprettet direktivet, må det registreres i prosjektet ved å importeres og deklareres i «app.module.ts»-filen. Når dette er gjort, kan direktivet brukes i malene.

Eksempel på bruk i en mal:

<main>
  <p *condition="true">Denne teksten vises betinget.</p>
</main>
    

Du kan nå opprette Egendefinerte Direktiver

Egendefinerte direktiver i Angular er en kraftfull metode for å manipulere DOM og legge til dynamisk oppførsel i malene dine. Du har nå lært å opprette og bruke både egendefinerte attributt- og strukturelle direktiver i dine Angular-applikasjoner. Med denne kunnskapen kan du utnytte mulighetene i Angular fullt ut.