Hvordan bygge tilpassede direktiver i Angular

En av hovedtrekkene til Angular er direktiver. Vinkeldirektiver er en måte for deg å legge til atferd til DOM-elementer. Angular tilbyr en rekke innebygde direktiver, og du kan også lage tilpassede direktiver i dette robuste rammeverket.

Hva er direktiver?

Direktiver er tilpassede koder som Angular bruker for å endre oppførselen eller utseendet til et HTML-element. Du kan bruke direktiver til å legge til hendelseslyttere, endre DOM eller vise eller skjule elementer.

Det finnes to typer innebygde direktiver i Angular, strukturell og attributt. Strukturelle direktiver endrer strukturen til DOM, mens attributtdirektiver endrer utseendet eller oppførselen til et element. Direktiver er en kraftig måte å utvide funksjonaliteten til Angular-komponenter på.

Fordeler med direktiver

Her er noen av fordelene med å bruke direktiver i Angular:

• Gjenbrukbarhet: Du kan bruke direktiver i flere komponenter, noe som sparer deg for tid og krefter.
instagram viewer
• Utvidbarhet: Du kan utvide direktivene for å legge til ny funksjonalitet, noe som gjør komponentene kraftigere.
• Fleksibilitet: Ved å bruke direktiver kan du endre oppførselen eller utseendet til et element på forskjellige måter, noe som gir deg mye fleksibilitet når du bygger applikasjonene dine.

Sette opp Angular-applikasjonen din

For å sette opp en Angular-applikasjon, installer Angular CLI ved å kjøre følgende kode i terminalen din:

npm install -g @angular/cli

Etter å ha installert Angular CLI, lag et Angular-prosjekt ved å kjøre følgende kommando:

ng new custom-directives-app

Å kjøre kommandoen ovenfor vil opprette et Angular-prosjekt med navnet tilpassede direktiver-app.

Opprette et tilpasset direktiv

Nå har du et Angular-prosjekt og kan begynne å lage dine tilpassede direktiver. Lag en TypeScript-fil og definer en klasse dekorert med @direktiv dekoratør.

De @direktiv decorator er en TypeScript-dekorator som brukes til å lage tilpassede direktiver. Lag nå en fremheve.direktiv.ts fil i src/app katalog. I denne filen vil du lage det tilpassede direktivet fremheve.

For eksempel:

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

Kodeblokken ovenfor importerer direktiv dekoratør fra @angular/kjerne modul. De @direktiv dekoratør dekorerer HighlightDirective klasse. Det tar et objekt som et argument med en velger eiendom.

I dette tilfellet setter du inn velger eiendom til [mitt høydepunkt] Det betyr at du kan bruke dette direktivet på malene dine ved å legge til mitt Høydepunkt attributt til et element.

Her er et eksempel på hvordan du bruker direktivet i malene dine:

Some text</p>
</main>

Legge til atferd i direktivet

Nå har du opprettet et direktiv. Det neste trinnet er å legge til en atferd i direktivet slik at det kan manipulere DOM. Du trenger ElementRef fra @angular/core for å legge til en atferd i et direktiv.

Du vil injisere ElementRef i direktivets konstruktør. ElementRef er en innpakning rundt et naturlig element i en visning.

Her er et eksempel på hvordan du legger til en atferd i et direktiv:

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

I dette eksemplet er konstruktøren av HighlightDirective klasse tar en ElementRef-parameter, som Angular automatisk injiserer. ElementRef gir tilgang til det underliggende DOM-elementet.

Ved hjelp av this.element.nativeElement egenskap, får du tilgang til det opprinnelige DOM-elementet i element parameter. Du setter deretter komponentens bakgrunnsfarge til lyse blå bruker stil eiendom. Dette betyr at uansett hvilket element du bruker mitt Høydepunkt direktiv til vil ha en lyseblå bakgrunn.

For å gjøre direktivet funksjonelt, sørg for at du importerer og erklærer 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{ }

Nå kan du bruke myHighlight-direktivet på elementene i Angular-komponentene dine.

Some text</p>
</main>

Kjør applikasjonen på utviklingsserveren for å teste om direktivet er funksjonelt. Du kan gjøre dette ved å kjøre følgende kommando i terminalen din:

ng serve

Etter å ha kjørt kommandoen, naviger til http://localhost: 4200/ i nettleseren din, og du vil se et grensesnitt som ser ut som bildet nedenfor.

Kantede innebygde direktiver aksepterer verdier for å endre elementets utseende, men det tilpassede direktivet mitt Høydepunkt gjør ikke. Du kan konfigurere direktivet til å akseptere en verdi det vil bruke til å dynamisk angi malens bakgrunnsfarge.

For å gjøre dette, erstatt koden i fremheve.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 vises HighlightDirective klasse inneholder en setter-metode kalt mitt Høydepunkt. Denne metoden tar en farge parameter for typestrengen. Du dekorerer settermetoden med @Input dekorator, slik at du kan overføre fargeverdien til direktivet fra den overordnede komponenten.

Nå kan du bestemme bakgrunnsfargen ved å sende en verdi til myHighlight-direktivet.

For eksempel:

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

Opprette et tilpasset strukturdirektiv

I de forrige avsnittene har du lært hvordan du oppretter, legger til atferd og bruker egendefinerte attributtdirektiver på malen din. Attributtdirektiver endrer utseendet til DOM-elementer, mens strukturelle direktiver legger til, fjerner eller flytter elementer i DOM.

Angular gir to strukturelle direktiver, ngFor og ngHvis. ngFor-direktivet gjengir en mal for hvert element i en samling (array), mens ngHvis håndterer betinget gjengivelse.

I denne delen vil du lage et tilpasset strukturelt direktiv som fungerer som ngHvis direktiv. For å gjøre dette, lag en tilstandsdirektiv.ts fil.

I tilstandsdirektiv.ts fil, skriv denne koden:

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 kodeblokken lar deg betinget gjengi elementer ved å bruke betingelse direktiv til et element og sender en boolsk verdi fra den overordnede komponenten.

I konstruktøren av Tilstandsdirektiv klasse, injiserer du en forekomst av MalRef og ViewContainerRef. TemplateRef representerer malen knyttet til direktivet, og ViewContainerRef representerer beholderen der applikasjonen gjengir visningene.

Klassesettmetoden ConditionDirective bruker en if else-setning for å sjekke arg-parameteren. Direktivet oppretter en innebygd visning ved å bruke den medfølgende malen hvis parameteren er sann. De opprette EmbeddedView metoden til ViewContainerRef-klassen oppretter og gjengir visningen i DOM.

Hvis parameteren er falsk, fjerner direktivet visningsbeholderen ved å bruke klar metoden for ViewContainerRef-klassen. Dette fjerner alle tidligere gjengitte visninger fra DOM.

Etter å ha opprettet direktivet, registrer det i prosjektet ditt ved å importere og deklarere det i app.modul.ts fil. Etter å ha gjort dette, kan du begynne å bruke direktivet i malene dine.

Her er et eksempel på hvordan du bruker det i malene dine:

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

Nå kan du lage tilpassede direktiver

Egendefinerte direktiver i Angular gir en kraftig måte å manipulere DOM og legge til dynamisk atferd til malene dine. Du har lært hvordan du oppretter og bruker tilpassede attributter og strukturelle direktiver i Angular-applikasjonene dine. Ved å forstå hvordan du oppretter og bruker tilpassede direktiver, kan du dra full nytte av mulighetene til Angular.