Hur man bygger anpassade direktiv i Angular

En väsentlig del av Angulars funktionalitet utgörs av direktiv. Dessa fungerar som ett sätt att addera specifika beteenden till DOM-element. Angular erbjuder en rad inbyggda direktiv, men ger även möjligheten att skapa egna, skräddarsydda direktiv inom detta robusta ramverk.

Vad är direktiv?

Direktiv är specialanpassade kodsegment som Angular använder för att påverka beteendet eller utseendet hos ett HTML-element. Genom att använda direktiv kan du bland annat lägga till händelselyssnare, modifiera DOM-strukturen, eller styra synligheten för olika element.

Inom Angular finns det två huvudkategorier av inbyggda direktiv: strukturella och attributdirektiv. Strukturella direktiv manipulerar DOM-strukturen direkt, medan attributdirektiv fokuserar på att ändra utseendet eller beteendet hos element. Direktiven är därmed ett mycket kraftfullt verktyg för att utöka kapaciteten hos Angular-komponenter.

Fördelar med direktiv

Att använda direktiv i Angular medför flera fördelar:

• **Återanvändbarhet:** Direktiven kan användas i flera olika komponenter, vilket sparar tid och arbete.
• **Utökningsbarhet:** Du kan anpassa och utöka direktivens funktioner för att göra dina komponenter mer kapabla.
• **Flexibilitet:** Med direktiv kan du justera utseendet eller beteendet hos element på många olika sätt, vilket ger stor flexibilitet i utvecklingen av dina applikationer.

Konfigurera din Angular-applikation

För att påbörja ett Angular-projekt, installera Angular CLI genom att köra följande kommando i din terminal:

 npm install -g @angular/cli

När installationen är klar, skapa ett nytt Angular-projekt med kommandot:

 ng new custom-directives-app

Detta kommando genererar ett nytt projekt med namnet ”custom-directives-app”.

Skapa ett eget direktiv

Med ett fungerande Angular-projekt är du redo att skapa dina egna direktiv. Börja med att skapa en TypeScript-fil och definiera en klass som dekoreras med `@Directive`-dekoratören.

`@Directive`-dekoratören används för att markera en klass som ett anpassat direktiv. Skapa nu en fil vid namn ”highlight.directive.ts” i mappen ”src/app”. Här ska du utveckla det anpassade direktivet för markering.

Exempel:

 import { Directive } from "@angular/core";
@Directive({
    selector: "[myHighlight]",
})
export class HighlightDirective {
    constructor() {}
}
 

I kodexemplet importeras först dekoratören `Directive` från `@angular/core`-modulen. Därefter används `@Directive`-dekoratören för att markera klassen `HighlightDirective`. Argumentet som ges till dekoratören är ett objekt som har en `selector`-egenskap.

I det här fallet är `selector` satt till `[myHighlight]`, vilket gör att du kan applicera direktivet i dina mallar genom att lägga till attributet `myHighlight` till ett element.

Så här applicerar du direktivet i dina mallar:

 <main>
<p myHighlight>Någon text</p>
</main>

Lägg till funktionalitet till direktivet

Efter att du har skapat ett direktiv är nästa steg att lägga till funktionalitet som gör att det kan interagera med DOM. För att åstadkomma detta behöver du `ElementRef` från `@angular/core`.

`ElementRef` ska injiceras i direktivets konstruktor. `ElementRef` fungerar som en omslag kring ett element i vyn.

Exempel på hur man lägger till ett beteende i ett direktiv:

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

I exemplet tar konstruktorn i klassen `HighlightDirective` emot en `ElementRef`-parameter som Angular automatiskt injicerar. `ElementRef` ger tillgång till det underliggande DOM-elementet.

Genom att använda egenskapen `this.element.nativeElement` kan du komma åt det inbyggda DOM-elementet. Sedan ändras bakgrundsfärgen på elementet till ljusblå. Det betyder att varje element som direktivet `myHighlight` appliceras på, kommer att få en ljusblå bakgrund.

För att direktivet ska fungera, se till att importera och deklarera det i filen `app.module.ts`.

Exempel:

 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 { }
 

Nu kan du tillämpa `myHighlight`-direktivet på element i dina Angular-komponenter.

 <main>
<p myHighlight>Någon text</p>
</main>

Starta din applikation på utvecklingsservern för att verifiera att direktivet fungerar. Du gör detta genom att köra följande kommando i terminalen:

 ng serve

Efter att ha kört kommandot, gå till `http://localhost:4200/` i din webbläsare, och du kommer att se ett gränssnitt som liknar bilden nedan.

Angulars inbyggda direktiv kan ta emot värden för att anpassa elementens utseende, men det anpassade direktivet `myHighlight` gör det inte än. Du kan konfigurera direktivet för att ta emot ett värde som dynamiskt ändrar bakgrundsfärgen.

För att göra detta, ersätt koden i filen `highlight.directive.ts` med följande:

 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 detta kodexempel har klassen `HighlightDirective` en sättermetod kallad `myHighlight`. Denna metod tar en färgparameter av typen `string`. Metoden dekoreras med `@Input`-dekoratören, vilket gör det möjligt att skicka färgparametern till direktivet från den överordnade komponenten.

Nu kan du bestämma bakgrundsfärgen genom att skicka ett värde till `myHighlight`-direktivet.

Exempel:

 <main>
<p myHighlight="pink">Någon text</p>
</main>

Skapa ett eget strukturellt direktiv

I de föregående avsnitten har du lärt dig hur man skapar, lägger till beteenden och använder anpassade attributdirektiv i en mall. Attributdirektiv förändrar utseendet på DOM-element, medan strukturella direktiv lägger till, tar bort eller flyttar element i DOM.

Angular erbjuder två strukturella direktiv: `ngFor` och `ngIf`. `ngFor` genererar en mall för varje objekt i en samling (array), medan `ngIf` hanterar villkorlig rendering.

I det här avsnittet ska du skapa ett anpassat strukturellt direktiv som fungerar på samma sätt som `ngIf`-direktivet. För att göra det, skapa en fil vid namn ”condition.directive.ts”.

Skriv följande kod i ”condition.directive.ts”-filen:

 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 
) {}
}
 

Koden gör det möjligt att villkorligt rendera element genom att applicera direktivet `condition` på ett element och skicka ett booleskt värde från den överordnade komponenten.

I konstruktorn för klassen `ConditionDirective` injiceras en instans av `TemplateRef` och `ViewContainerRef`. `TemplateRef` representerar mallen som är kopplad till direktivet och `ViewContainerRef` representerar behållaren där applikationen återger vyerna.

Klassens sättermetod `ConditionDirective` använder en if-else-sats för att kontrollera `arg`-parametern. Om parametern är sann skapar direktivet en inbäddad vy med hjälp av den medföljande mallen. Metoden `createEmbeddedView` för klassen `ViewContainerRef` skapar och återger vyn i DOM.

Om parametern är falsk rensar direktivet vybehållaren med metoden `clear` för klassen `ViewContainerRef`. Detta tar bort alla tidigare återgivna vyer från DOM.

När du har skapat direktivet, registrera det i ditt projekt genom att importera och deklarera det i filen `app.module.ts`. Därefter kan du börja använda direktivet i dina mallar.

Exempel på hur det kan användas i mallar:

 <main>
<p *condition="true">Hej där!!!</p>
</main>

Nu kan du skapa dina egna direktiv

Egenutvecklade direktiv i Angular erbjuder ett kraftfullt sätt att manipulera DOM och addera dynamiskt beteende till dina mallar. Du har lärt dig att skapa och använda anpassade attribut- och strukturella direktiv i dina Angular-applikationer. Genom att förstå hur man skapar och använder anpassade direktiv kan du dra full nytta av Angulars kapacitet.