Hur man bygger anpassade direktiv i Angular

En av nyckelfunktionerna i Angular är direktiv. Vinkeldirektiv är ett sätt för dig att lägga till beteende till DOM-element. Angular tillhandahåller en mängd olika inbyggda direktiv, och du kan också skapa anpassade direktiv i detta robusta ramverk.

Vad är direktiv?

Direktiv är anpassade koder som Angular använder för att ändra beteendet eller utseendet på ett HTML-element. Du kan använda direktiv för att lägga till händelseavlyssnare, ändra DOM eller visa eller dölja element.

Det finns två typer av inbyggda direktiv i Angular, strukturell och attribut. Strukturella direktiv ändrar strukturen för DOM, medan attributdirektiv ändrar utseendet eller beteendet hos ett element. Direktiv är ett kraftfullt sätt att utöka funktionaliteten hos Angular-komponenter.

Fördelar med direktiv

Här är några av fördelarna med att använda direktiv i Angular:

  • Återanvändbarhet: Du kan använda direktiv i flera komponenter, vilket sparar tid och ansträngning.
  • Utökningsbarhet: Du kan utöka direktiven för att lägga till ny funktionalitet, vilket gör dina komponenter mer kraftfulla.
  • Flexibilitet: Med hjälp av direktiv kan du ändra beteendet eller utseendet på ett element på olika sätt, vilket ger dig mycket flexibilitet när du bygger dina applikationer.

Konfigurera din Angular-applikation

För att ställa in en Angular-applikation, installera Angular CLI genom att köra följande kod i din terminal:

 npm install -g @angular/cli

När du har installerat Angular CLI skapar du ett Angular-projekt genom att köra följande kommando:

 ng new custom-directives-app

Genom att köra kommandot ovan skapas ett Angular-projekt med namnet custom-directives-app.

Skapa ett anpassat direktiv

Nu har du ett Angular-projekt och kan börja skapa dina anpassade direktiv. Skapa en TypeScript-fil och definiera en klass dekorerad med @Directive-dekoratören.

@Directive-dekoratören är en TypeScript-dekoratör som används för att skapa anpassade direktiv. Skapa nu en highlight.directive.ts-fil i katalogen src/app. I den här filen kommer du att skapa den anpassade direktivmarkeringen.

Till exempel:

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

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

Kodblocket ovan importerar direktivdekoratören från @angular/core-modulen. @Directive-dekoratören dekorerar HighlightDirective-klassen. Den tar ett objekt som ett argument med en väljaregenskap.

I det här fallet ställer du in väljaregenskapen till [myHighlight] vilket innebär att du kan tillämpa detta direktiv på dina mallar genom att lägga till myHighlight-attributet till ett element.

Här är ett exempel på hur du använder direktivet i dina mallar:

 <main>
<p myHighlight>Some text</p>
</main>

Lägga till beteende till direktivet

Nu har du skapat ett direktiv. Nästa steg är att lägga till ett beteende i direktivet så att det kan manipulera DOM. Du behöver ElementRef från @angular/core för att lägga till ett beteende i ett direktiv.

Du kommer att injicera ElementRef i direktivets konstruktor. ElementRef är ett omslag runt ett inbyggt element i en vy.

Här är ett exempel på hur du 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 det här exemplet tar konstruktören av klassen HighlightDirective en ElementRef-parameter, som Angular automatiskt injicerar. ElementRef ger åtkomst till det underliggande DOM-elementet.

Genom att använda egenskapen this.element.nativeElement får du åtkomst till det inbyggda DOM-elementet i elementparametern. Du ställer sedan in komponentens bakgrundsfärg till ljusblå med hjälp av stilegenskapen. Det betyder att vilket element du än tillämpar myHighlight-direktivet på kommer att ha en ljusblå bakgrund.

För att göra direktivet funktionellt, se till att du importerar och deklarerar det i app.module.ts-filen.

Till 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å elementen i dina Angular-komponenter.

 <main>
<p myHighlight>Some text</p>
</main>

Kör din applikation på utvecklingsservern för att testa om direktivet fungerar. Du kan göra detta genom att köra följande kommando i din terminal:

 ng serve

Efter att ha kört kommandot, navigera till http://localhost:4200/ på din webbläsare, och du kommer att se ett gränssnitt som ser ut som bilden nedan.

Vinklade inbyggda direktiv accepterar värden för att ändra elementets utseende, men det anpassade direktivet myHighlight gör det inte. Du kan konfigurera direktivet att acceptera ett värde som det kommer att använda för att dynamiskt ställa in mallens bakgrundsfärg.

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

 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 kodblocket ovan innehåller HighlightDirective-klassen en sättermetod som kallas myHighlight. Denna metod tar en färgparameter av typen sträng. Du dekorerar sättermetoden med @Input-dekoratorn, vilket gör att du kan skicka färgvärdet till direktivet från den överordnade komponenten.

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

Till exempel:

 <main>
<p myHighlight="pink">Some text</p>
</main>

Skapa ett anpassat strukturdirektiv

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

Angular ger två strukturella direktiv, ngFor och ngIf. ngFor-direktivet återger en mall för varje objekt i en samling (array), medan ngIf hanterar villkorlig rendering.

I det här avsnittet kommer du att skapa ett anpassat strukturdirektiv som fungerar som ngIf-direktivet. För att göra detta, skapa en condition.directive.ts-fil.

Skriv denna kod i filen condition.directive.ts:

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

Detta kodblock låter dig villkorligt rendera element genom att tillämpa villkorsdirektivet på ett element och skicka ett booleskt värde från den överordnade komponenten.

I konstruktorn för klassen ConditionDirective injicerar du en instans av TemplateRef och ViewContainerRef. TemplateRef representerar mallen som är associerad med direktivet, och ViewContainerRef representerar behållaren där applikationen återger vyerna.

Klasssättarmetoden ConditionDirective använder en if else-sats för att kontrollera arg-parametern. Direktivet skapar en inbäddad vy med hjälp av den medföljande mallen om parametern är sann. CreateEmbeddedView-metoden för klassen ViewContainerRef skapar och återger vyn i DOM.

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

När du har skapat direktivet registrerar du det i ditt projekt genom att importera och deklarera det i app.module.ts-filen. Efter att ha gjort detta kan du börja använda direktivet i dina mallar.

Här är ett exempel på hur du använder det i dina mallar:

 <main>
<p *condition="true">Hello There!!!</p>
</main>

Nu kan du skapa anpassade direktiv

Anpassade direktiv i Angular ger ett kraftfullt sätt att manipulera DOM och lägga till dynamiskt beteende till dina mallar. Du har lärt dig hur du skapar och tillämpar 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 funktioner.