Hur man bygger anpassade direktiv i Angular

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

Vad är direktiv?

Direktiv i Angular är specialiserade kodkonstruktioner som är utformade för att påverka presentationen och interaktiviteten hos HTML-element på olika sätt, till exempel genom att modifiera DOM (Document Object Model), lägga till händelsehanterare eller kontrollera synligheten. Dessa direktiv gör det möjligt för utvecklare att effektivt manipulera användargränssnittet genom att specificera önskade ändringar inom själva mallsyntaxen.

Strukturella direktiv i Angular ändrar layouten för Document Object Model (DOM), medan attributdirektiv påverkar den visuella aspekten eller funktionaliteten för enskilda element i mallen. Dessa direktiv erbjuder ett robust sätt att förbättra funktionerna i Angular-applikationer genom att låta utvecklare anpassa och manipulera HTML-markup på ett enkelt sätt.

Fördelar med direktiv

Att använda direktiv i Angular ger en rad fördelar, bland annat ökad flexibilitet och kontroll över komponenternas beteende, samt förbättrad modularitet och kodorganisation. Genom att använda direktiv kan utvecklare skapa anpassade beteenden för komponenter som sträcker sig bortom grundläggande HTML-attribut eller livscykelkrokar, vilket möjliggör större uttrycksfullhet och finkornig kontroll över gränssnittsinteraktioner. Dessutom möjliggör direktiv bättre inkapsling och separation av problem inom applikationen, vilket främjar återanvändbarhet och underhåll över olika delar av projektet. Sammantaget spelar direktiv en viktig roll för att forma strukturen och funktionaliteten i Angular-applikationer, och ger utvecklare kraftfulla verktyg för att bygga komplexa användargränssnitt och användarupplevelser på ett effektivt sätt.

Återanvändbarhet är en viktig egenskap hos direktiv som gör att de kan användas i flera komponenter, vilket leder till ökad effektivitet genom att minska redundans och främja konsekvens i hela ditt projekt.

Direktivens utbyggbarhet gör det möjligt att lägga till nya funktioner i komponenterna, vilket ökar deras kapacitet och förbättrar den övergripande prestandan.

Direktivens mångsidighet gör det möjligt att manipulera och anpassa elementens egenskaper och åtgärder, vilket ger utvecklarna stor kreativ frihet att konstruera sina applikationer på ett effektivt sätt.

Konfigurera din Angular-applikation

För att skapa ett Angular-projekt, kör följande kommando i din terminal för att installera Angular Command Line Interface (CLI):

 npm install -g @angular/cli

Efter installation av Angular Command Line Interface (CLI) kan man skapa ett Angular-projekt med hjälp av följande kommando:

 ng new custom-directives-app

Genom att utföra ovan nämnda instruktion skapas en Angular-applikation som kallas “custom-directives-app”.

Skapa ett anpassat direktiv

För att skapa anpassade direktiv i ett Angular-projekt måste man först skapa en TypeScript-fil och utse en klass som är utsmyckad med direktivdekoratorn.

Dekoratorn @Directive är en funktion i TypeScript som gör det möjligt att skapa anpassade direktiv. För att implementera den här funktionen ska vi skapa en highlight.directive.ts fil i src/app katalogen. I den här filen ska vi konstruera det anpassade direktivet som kallas highlight .

Till exempel:

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

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

Det importerade direktivet härrör från Angulars kärnmodul, och det pryds med dekoratorn @Directive , som accepterar ett argument som består av en objektorienterad representation med ett selector attribut.

I det här fallet gör inställningen av selector-egenskapen till “[myHighlight]” att man kan tillämpa detta direktiv på sina mallar genom att bifoga attributet “myHighlight” till ett angivet element.

Att införliva direktivet i mallstrukturen kan göras på följande sätt:

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

Lägga till beteende i direktivet

För att kunna manipulera DOM (Document Object Model) med ett direktiv måste man först skapa direktivet och få en instans av ElementRef från paketet @angular/core . Denna referens fungerar som ett sätt att koppla beteenden till element i mallen.

För att kunna använda ElementRef i ett direktiv måste den införlivas i direktivets konstruktörsfunktion. ElementRef fungerar som en inkapsling för ett inbyggt element som ligger inom en specifik synvinkel.

Här är en illustration som visar hur man kopplar ett beteende till ett direktiv i Angular:

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

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

Konstruktören för klassen HighlightDirective accepterar en ElementRef-parameter, som automatiskt tillhandahålls av Angular. Denna ElementRef ger åtkomst till motsvarande DOM-element.

Genom att använda egenskapen this.element.nativeElement kan man få åtkomst till det ursprungliga DOM-elementet som representeras av parametern element . Genom att sedan använda egenskapen style är det möjligt att tilldela en ljusblå nyans som bakgrundsfärg för komponenten i fråga. Följaktligen kommer alla element på vilka myHighlight -direktivet tillämpas att ha en himmelsblå bakgrund.

För att göra direktivet operativt är det absolut nödvändigt att du importerar och uttryckligen deklarerar dess närvaro i filen app.module.ts.

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

Du kan nu använda myHighlight-direktivet på de ingående elementen i dina Angular-komponenter.

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

För att utvärdera funktionaliteten hos ett specifikt direktiv i en applikation rekommenderar vi att du distribuerar och kör applikationen på den angivna utvecklingsservern med hjälp av ett kommandoradsgränssnitt. För att initiera denna process, navigera till lämplig katalog där terminalen finns och ange det angivna kommandot för exekvering. På så sätt kan du kontrollera om direktivet fungerar som avsett eller inte.

 ng serve

Efter att ha utfört den givna instruktionen, vänligen rikta din webbläsare till " http://localhost:4200/ " för att få tillgång till ett användargränssnitt som har en slående likhet med den avbildade visuella representationen nedan.

Angulars inbyggda direktiv gör det möjligt att modifiera ett elements utseende genom att acceptera specifika värden, men denna funktionalitet är inte utökad till anpassade direktiv som “myHighlight”. För att åtgärda denna begränsning kan man implementera ett konfigurationsalternativ i det anpassade direktivet som möjliggör dynamisk modifiering av mallens bakgrundsfärg baserat på det angivna värdet.

För att ändra beteendet hos direktivet highlight i Angular kan man ersätta innehållet i filen highlight.directive.ts med den angivna mallen. Detta kommer att resultera i en annan rendering av HTML-element som matchas av direktivets väljare.

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

Den medföljande koden visar en implementering av en HighlightDirective-klass i Angular, som har en setter-metod identifierad som “myHighlight”. Metoden accepterar en enda inmatningsparameter av datatypen string och är utsmyckad med dekoratorn Input, vilket möjliggör mottagning av det nämnda färgvärdet från den övervakande komponenten.

Man kan nu ange önskad bakgrundsfärg för elementet med myHighlight attributet genom att ange ett värde för det.

Till exempel:

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

Skapa ett anpassat strukturdirektiv

I tidigare avsnitt har du fått instruktioner om hur du konstruerar, tillför åtgärder och implementerar anpassade attributdirektiv i en mall. Attributdirektiv ändrar den visuella presentationen av DOM-komponenter, medan strukturdirektiv ändrar sammansättningen av element i DOM genom att lägga till, ta bort eller omplacera dem.

Angular erbjuder två grundläggande strukturella direktiv, nämligen ngFor och ngIf . Det förstnämnda itererar genom en array av objekt och visar en motsvarande mall för varje element, medan det sistnämnda ansvarar för villkorlig rendering av element baserat på specifika kriterier.

I detta segment ska vi utveckla ett skräddarsytt strukturellt direktiv som uppvisar liknande funktionalitet som ngIf -direktivet. För att åstadkomma detta ska vi skapa en condition.directive.ts fil.

I filencondition.directive.t skriver du den här koden:

 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 kodfragment möjliggör villkorad visning av komponenter genom tillämpning av “condition”-direktiven på ett element, åtföljt av överföring av ett booleskt värde från den omgivande komponenten.

a TemplateRef och a ViewContainerRef . Den förstnämnda fungerar som en referens till den mall som är associerad med direktivet, medan den sistnämnda representerar den vykontext inom vilken direktivens vyer kommer att renderas.

ConditionDirective använder ett villkorligt uttryck, implementerat genom ett if-else statement, för att utvärdera värdet av det argument som det tar emot. Om inmatningen visar sig vara giltig kommer konstruktionen att generera ett slutet perspektiv genom att använda den angivna designmallen med hjälp av metoden createEmbeddedView() som finns i ViewContainerRef . Därefter kommer funktionen renderView() som är associerad med denna containerinstans att organisera införlivandet av den nyskapade synvinkeln i webbläsarens Document Object Model (DOM).

Om det angivna villkoret inte uppfylls använder kommandot ViewContainerRef:s clear()-metod för att ta bort alla tidigare renderingar inom vybehållaren från dokumentet.

För att införliva direktivet måste det importeras och bekräftas att det finns i programmets modulfil. När detta är gjort blir det tillgängligt för användning inom mallkonstruktioner.

Att införliva tillägget i en mall kan göras genom att införliva det medföljande kodavsnittet, som visas nedan:

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

Nu kan du skapa anpassade direktiv

Angulars anpassade direktiv erbjuder ett kraftfullt sätt att påverka Document Object Model (DOM) och införa dynamisk funktionalitet i mallstrukturer. Efter att ha bekantat dig med skapandet och tillämpningen av anpassade attribut och strukturella direktiv är du nu utrustad för att till fullo utnyttja potentialen i Angular.