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.
Indholdsfortegnelse
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.
- Udvidelsesmuligheder: Du kan udvide direktiver 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 @Directive-dekoratoren.
@Directive-dekoratøren er en TypeScript-dekorator, der bruges til at oprette brugerdefinerede direktiver. Opret nu en highlight.directive.ts-fil i src/app-mappen. I denne fil vil du oprette den brugerdefinerede direktivfremhævning.
For eksempel:
import { Directive } from "@angular/core";@Directive({
selector: "[myHighlight]",
})
export class HighlightDirective {
constructor() {}
}
Kodeblokken ovenfor importerer Direktiv-dekoratoren fra @angular/core-modulet. @Directive-dekoratøren dekorerer HighlightDirective-klassen. Det tager et objekt som et argument med en vælgeregenskab.
I dette tilfælde indstiller du vælgeregenskaben til [myHighlight] hvilket betyder, at du kan anvende dette direktiv på dine skabeloner ved at tilføje myHighlight-attributten til et element.
Her er et eksempel på, hvordan du bruger direktivet i dine skabeloner:
<main>
<p myHighlight>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]"
})
export class HighlightDirective {
constructor(private element: ElementRef) {
this.element.nativeElement.style.backgroundColor="lightblue";
}
}
I dette eksempel tager konstruktøren af HighlightDirective-klassen en ElementRef-parameter, som Angular automatisk injicerer. ElementRef giver adgang til det underliggende DOM-element.
Ved at bruge egenskaben this.element.nativeElement får du adgang til det native DOM-element i elementparameteren. Du indstiller derefter komponentens baggrundsfarve til lyseblå ved hjælp af stilegenskaben. Det betyder, at uanset hvilket element du anvender myHighlight-direktivet på, vil det have en lyseblå baggrund.
For at gøre direktivet funktionelt skal du sørge for at importere og erklære det i app.module.ts-filen.
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]
})
export class AppModule { }
Nu kan du anvende myHighlight-direktivet på elementerne i dine Angular-komponenter.
<main>
<p myHighlight>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 myHighlight gør det 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 filen highlight.directive.ts med denne:
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 kodeblokken ovenfor indeholder HighlightDirective-klassen en setter-metode kaldet myHighlight. Denne metode tager en farveparameter af typen streng. Du dekorerer setter-metoden med @Input-dekoratoren, 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:
<main>
<p myHighlight="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 ngIf. ngFor-direktivet gengiver en skabelon for hvert element i en samling (array), mens ngIf håndterer betinget gengivelse.
I dette afsnit vil du oprette et brugerdefineret strukturelt direktiv, der fungerer som ngIf-direktivet. For at gøre dette skal du oprette en condition.directive.ts-fil.
Skriv denne kode 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
) {}
}
Denne kodeblok giver dig mulighed for betinget at gengive elementer ved at anvende betingelsesdirektivet på et element og sende en boolesk værdi fra den overordnede komponent.
I constructoren af ConditionDirective-klassen injicerer du en forekomst af TemplateRef 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. CreateEmbeddedView-metoden for ViewContainerRef-klassen opretter og gengiver visningen i DOM.
Hvis parameteren er falsk, rydder direktivet visningsbeholderen ved hjælp af clear-metoden i 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 erklære det i app.module.ts-filen. 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:
<main>
<p *condition="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.