Sådan bygger du brugerdefinerede direktiver i Angular

Et af nøglefunktionerne ved Angular er direktiver. Vinkeldirektiver er en måde for dig at tilføje adfærd til DOM-elementer. Angular tilbyder en række indbyggede direktiver, og du kan også oprette brugerdefinerede direktiver i denne robuste ramme.

Hvad er direktiver?

Direktiver er brugerdefinerede koder, som Angular bruger til at ændre adfærden eller udseendet af et HTML-element. Du kan bruge direktiver til at tilføje begivenhedslyttere, ændre DOM eller vise eller skjule elementer.

Der er to typer indbyggede direktiver i Angular, strukturel og attribut. Strukturelle direktiver ændrer strukturen af ​​DOM, mens attributdirektiver ændrer udseendet eller adfærden af ​​et element. Direktiver er en effektiv måde at udvide funktionaliteten af ​​Angular-komponenter på.

Fordele ved direktiver

Her er nogle af fordelene ved at bruge direktiver i Angular:

• Genanvendelighed: Du kan bruge direktiver i flere komponenter, hvilket sparer dig tid og kræfter.
instagram viewer
• Udvidelsesmuligheder: Du kan udvide direktiverne for at tilføje ny funktionalitet, hvilket gør dine komponenter mere kraftfulde.
• Fleksibilitet: Ved hjælp af direktiver kan du ændre adfærden eller udseendet af et element på forskellige måder, hvilket giver dig en masse fleksibilitet, når du bygger dine applikationer.

Opsætning af din Angular-applikation

For at konfigurere en Angular-applikation skal du installere Angular CLI ved at køre følgende kode i din terminal:

npm install -g @angular/cli

Efter installation af Angular CLI skal du oprette et Angular-projekt ved at køre følgende kommando:

ng new custom-directives-app

Ved at køre kommandoen ovenfor oprettes et Angular-projekt med navnet custom-directives-app.

Oprettelse af et brugerdefineret direktiv

Nu har du et Angular-projekt og kan begynde at oprette dine brugerdefinerede direktiver. Opret en TypeScript-fil og definer en klasse dekoreret med @direktiv dekoratør.

Det @direktiv decorator er en TypeScript-dekorator, der bruges til at oprette brugerdefinerede direktiver. Opret nu en fremhæve.direktiv.ts fil i src/app vejviser. I denne fil vil du oprette det brugerdefinerede direktiv fremhæve.

For eksempel:

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

Kodeblokken ovenfor importerer direktiv dekoratør fra @vinklet/kerne modul. Det @direktiv dekoratør dekorerer Fremhæv Direktiv klasse. Det tager et objekt som et argument med en vælger ejendom.

I dette tilfælde indstiller du vælger ejendom til [mit højdepunkt] hvilket betyder, at du kan anvende dette direktiv på dine skabeloner ved at tilføje mit Højdepunkt attribut til et element.

Her er et eksempel på, hvordan du bruger direktivet i dine skabeloner:

Some text</p>
</main>

Tilføjelse af adfærd til direktivet

Nu har du oprettet et direktiv. Det næste trin er at tilføje en adfærd til direktivet, så det kan manipulere DOM. Du skal bruge ElementRef fra @angular/core for at tilføje en adfærd til et direktiv.

Du vil injicere ElementRef i direktivets konstruktør. ElementRef er en indpakning omkring et indbygget element inde i en visning.

Her er et eksempel på, hvordan du tilføjer en adfærd til et direktiv:

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

I dette eksempel er konstruktøren af Fremhæv Direktiv klasse tager en ElementRef-parameter, som Angular automatisk injicerer. ElementRef giver adgang til det underliggende DOM-element.

Ved brug af this.element.nativeElement egenskab, får du adgang til det oprindelige DOM-element i element parameter. Du indstiller derefter komponentens baggrundsfarve til lyseblå bruger stil ejendom. Det betyder, at uanset hvilket element du anvender mit Højdepunkt direktiv til vil have en lyseblå baggrund.

For at gøre direktivet funktionelt skal du sørge for at importere og deklarere det i app.modul.ts fil.

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

Nu kan du anvende myHighlight-direktivet på elementerne i dine Angular komponenter.

Some text</p>
</main>

Kør dit program på udviklingsserveren for at teste, om direktivet er funktionelt. Du kan gøre dette ved at køre følgende kommando i din terminal:

ng serve

Når du har kørt kommandoen, skal du navigere til http://localhost: 4200/ på din webbrowser, og du vil se en grænseflade, der ligner billedet nedenfor.

Kantede indbyggede direktiver accepterer værdier for at ændre elementets udseende, men det brugerdefinerede direktiv mit Højdepunkt gør ikke. Du kan konfigurere direktivet til at acceptere en værdi, det vil bruge til dynamisk at indstille skabelonens baggrundsfarve.

For at gøre dette skal du erstatte koden i fremhæve.direktiv.ts fil med denne:

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 kodeblokken ovenfor er Fremhæv Direktiv klasse indeholder en setter-metode kaldet mit Højdepunkt. Denne metode tager en farve parameter for typestrengen. Du dekorerer sættemetoden med @Input dekorator, så du kan overføre farveværdien til direktivet fra den overordnede komponent.

Nu kan du bestemme baggrundsfarven ved at overføre en værdi til myHighlight-direktivet.

For eksempel:

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

Oprettelse af et tilpasset strukturdirektiv

I de foregående afsnit har du lært, hvordan du opretter, tilføjer adfærd og anvender brugerdefinerede attributdirektiver på din skabelon. Attributdirektiver ændrer udseendet af DOM-elementer, mens strukturelle direktiver tilføjer, fjerner eller flytter elementer i DOM.

Angular giver to strukturelle direktiver, ngFor og ngHvis. ngFor-direktivet gengiver en skabelon for hvert element i en samling (array), mens ngHvis håndterer betinget gengivelse.

I dette afsnit vil du oprette et brugerdefineret strukturelt direktiv, der fungerer som ngHvis direktiv. For at gøre dette skal du oprette en betingelsesdirektiv.ts fil.

I den betingelsesdirektiv.ts fil, skriv denne kode:

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

Denne kodeblok giver dig mulighed for betinget at gengive elementer ved at anvende tilstand direktiv til et element og videregivelse af en boolesk værdi fra den overordnede komponent.

I konstruktøren af Tilstandsdirektiv klasse, injicerer du en instans af SkabelonRef og ViewContainerRef. TemplateRef repræsenterer den skabelon, der er knyttet til direktivet, og ViewContainerRef repræsenterer den beholder, hvor applikationen gengiver visningerne.

ConditionDirective-klassesættermetoden bruger en if else-sætning til at kontrollere arg-parameteren. Direktivet opretter en indlejret visning ved hjælp af den medfølgende skabelon, hvis parameteren er sand. Det oprette EmbeddedView metoden for ViewContainerRef-klassen opretter og gengiver visningen i DOM.

Hvis parameteren er falsk, rydder direktivet visningsbeholderen ved hjælp af klar metoden for ViewContainerRef-klassen. Dette fjerner alle tidligere gengivne visninger fra DOM.

Når du har oprettet direktivet, skal du registrere det i dit projekt ved at importere og deklarere det i app.modul.ts fil. Når du har gjort dette, kan du begynde at bruge direktivet i dine skabeloner.

Her er et eksempel på, hvordan du bruger det i dine skabeloner:

"true">Hello There!!!</p>
</main>

Nu kan du oprette brugerdefinerede direktiver

Brugerdefinerede direktiver i Angular giver en effektiv måde at manipulere DOM og tilføje dynamisk adfærd til dine skabeloner. Du har lært, hvordan du opretter og anvender brugerdefinerede attributter og strukturelle direktiver i dine Angular-applikationer. Ved at forstå, hvordan du opretter og bruger brugerdefinerede direktiver, kan du drage fuld fordel af Angulars muligheder.