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.
Innholdsfortegnelse
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 er 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.
- 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 kalt custom-directives-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 @Directive-dekoratoren.
@Directive-dekoratoren er en TypeScript-dekorator som brukes til å lage tilpassede direktiver. Lag nå en highlight.directive.ts-fil i src/app-katalogen. I denne filen vil du lage det egendefinerte direktivhøydepunktet.
For eksempel:
import { Directive } from "@angular/core";@Directive({
selector: "[myHighlight]",
})
export class HighlightDirective {
constructor() {}
}
Kodeblokken ovenfor importerer direktivdekoratoren fra @angular/core-modulen. @Directive-dekoratøren dekorerer HighlightDirective-klassen. Den tar et objekt som et argument med en velgeregenskap.
I dette tilfellet setter du velgeregenskapen til [myHighlight] Det betyr at du kan bruke dette direktivet på malene dine ved å legge til myHighlight-attributtet til et element.
Her er et eksempel på hvordan du bruker direktivet i malene dine:
<main>
<p myHighlight>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]"
})
export class HighlightDirective {
constructor(private element: ElementRef) {
this.element.nativeElement.style.backgroundColor="lightblue";
}
}
I dette eksemplet tar konstruktøren av HighlightDirective-klassen en ElementRef-parameter, som Angular automatisk injiserer. ElementRef gir tilgang til det underliggende DOM-elementet.
Ved å bruke this.element.nativeElement-egenskapen får du tilgang til det opprinnelige DOM-elementet til elementparameteren. Du setter deretter komponentens bakgrunnsfarge til lyseblå ved å bruke stilegenskapen. Dette betyr at uansett hvilket element du bruker myHighlight-direktivet på vil ha en lyseblå bakgrunn.
For å gjøre direktivet funksjonelt, sørg for at du importerer og erklærer 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 { }
Nå kan du bruke myHighlight-direktivet på elementene i Angular-komponentene dine.
<main>
<p myHighlight>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 godtar verdier for å endre elementets utseende, men det tilpassede direktivet myHighlight gjør det ikke. Du kan konfigurere direktivet til å akseptere en verdi det vil bruke til å dynamisk angi malens bakgrunnsfarge.
For å gjøre dette, erstatt koden i highlight.directive.ts-filen 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 inneholder HighlightDirective-klassen en settermetode kalt myHighlight. Denne metoden tar en fargeparameter av typen streng. Du dekorerer settermetoden med @Input-dekoratoren, slik at du kan sende fargeverdien inn i direktivet fra den overordnede komponenten.
Nå kan du bestemme bakgrunnsfargen ved å sende en verdi til myHighlight-direktivet.
For eksempel:
<main>
<p myHighlight="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 ngIf. ngFor-direktivet gjengir en mal for hvert element i en samling (array), mens ngIf håndterer betinget gjengivelse.
I denne delen vil du lage et tilpasset strukturelt direktiv som fungerer som ngIf-direktivet. For å gjøre dette, lag en condition.directive.ts-fil.
I filen condition.directive.ts skriver du denne 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
) {}
}
Denne kodeblokken lar deg betinget gjengi elementer ved å bruke betingelsesdirektivet på et element og sende en boolsk verdi fra den overordnede komponenten.
I konstruktøren av ConditionDirective-klassen injiserer du en forekomst av TemplateRef 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. CreateEmbeddedView-metoden til ViewContainerRef-klassen oppretter og gjengir visningen i DOM.
Hvis parameteren er falsk, sletter direktivet visningsbeholderen ved å bruke clear-metoden til 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.module.ts-filen. Etter å ha gjort dette, kan du begynne å bruke direktivet i malene dine.
Her er et eksempel på hvordan du bruker det i malene dine:
<main>
<p *condition="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.