Angulars anpassade direktiv erbjuder en robust mekanism för att modifiera DOM och införliva dynamiskt beteende i dina mallar.

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.
    • instagram viewer
  • Sträckbarhet: 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 anpassade direktiv-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 @Direktiv dekoratör.

De @Direktiv decorator är en TypeScript-dekoratör som används för att skapa anpassade direktiv. Skapa nu en markera.direktiv.ts fil i src/app katalog. I den här filen kommer du att skapa det anpassade direktivet markera.

Till exempel:

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

Kodblocket ovan importerar Direktiv dekoratör från @angular/kärna modul. De @Direktiv dekoratör dekorerar Markera Direktiv klass. Det tar ett objekt som ett argument med en väljare fast egendom.

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

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


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 kommer att behöva ElementRef från @angular/core för att lägga till ett beteende till 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]"
})
exportclassHighlightDirective{
constructor(private element: ElementRef) {
this.element.nativeElement.style.backgroundColor = 'lightblue';
 }
}

I det här exemplet är konstruktören av Markera Direktiv class tar en ElementRef-parameter, som Angular automatiskt injicerar. ElementRef ger åtkomst till det underliggande DOM-elementet.

Använder sig av this.element.nativeElement egenskapen kommer du åt det inbyggda DOM-elementet i element parameter. Du ställer sedan in komponentens bakgrundsfärg till ljusblå använda stil fast egendom. Detta betyder att vilket element du än tillämpar min Highlight direktiv till kommer att ha en ljusblå bakgrund.

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

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

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


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

När du har kört kommandot, navigera till http://localhost: 4200/ i 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 min Highlight gör 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, byt ut koden i markera.direktiv.ts fil med detta:

import { Directive, ElementRef, Input } from"@angular/core";
@Directive({
 selector: "[myHighlight]"
})


exportclassHighlightDirective{
 @Input() set myHighlight(color: string) {
this.element.nativeElement.style.backgroundColor = color;
 }
constructor(private element: ElementRef) { 
 }
}

I kodblocket ovan visas Markera Direktiv klass innehåller en settermetod som kallas min Highlight. Denna metod tar en Färg parameter av typen sträng. Du dekorerar sättermetoden med @Inmatning dekorator, så att du kan överföra 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:


'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 tillhandahåller två strukturella direktiv, ngFor och ngOm. ngFor-direktivet återger en mall för varje objekt i en samling (array), medan ngOm hanterar villkorlig rendering.

I det här avsnittet kommer du att skapa ett anpassat strukturdirektiv som fungerar som ngOm direktiv. För att göra detta, skapa en tillståndsdirektiv.ts fil.

I den tillståndsdirektiv.ts fil, skriv denna kod:

import { Directive, Input, TemplateRef, ViewContainerRef } from'@angular/core'
@Directive({
 selector: "[condition]"
})


exportclassConditionDirective{


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

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

I konstruktören av Tillståndsdirektiv klass, injicerar du en instans av Mallref 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. De skapa EmbeddedView metoden för klassen ViewContainerRef skapar och återger vyn i DOM.

Om parametern är falsk, rensar direktivet vybehållaren med hjälp av klar 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.modul.ts fil. 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:


"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.