Sådan bruges og oprettes brugerdefinerede direktiver i Angular

Efter at have spillet med Angular i lang tid kom jeg endelig med en forståelig forklaring på Angular-direktiver. I denne artikel vil vi først forstå, hvad et direktiv præcist er, og hvordan man bruger det i Angular. Vi opretter også vores egne brugerdefinerede direktiver. Så hvad venter vi på? Lad os dykke dybt ned i det.

Hvad er et vinkeldirektiv?

Direktiver er de funktioner, der udføres, når Angular compiler finder den . Vinkeldirektiver forbedrer HTML-elementers kapacitet ved at vedhæfte brugerdefineret adfærd til DOM.

Fra kernekonceptet er vinklede direktiver kategoriseret i tre kategorier.

  1. Attributdirektiver
  2. Strukturdirektiver
  3. Komponenter

Attributdirektiver

Attributdirektiver er ansvarlige for at manipulere DOM-elementers udseende og opførsel. Vi kan bruge attributdirektiver til at ændre stilen på DOM-elementer. Disse direktiver bruges også til at skjule eller vise bestemte DOM-elementer betinget. Angular giver mange indbyggede attributdirektiver som NgStyle , NgClass osv. Vi kan også oprette vores egne tilpassede attributdirektiver til vores ønskede funktionalitet.

Strukturdirektiver

Strukturdirektiver er ansvarlige for at ændre strukturen i DOM. De arbejder ved at tilføje eller fjerne elementerne fra DOM, i modsætning til attributdirektiver, der bare ændrer elementets udseende og adfærd.

Du kan let skelne mellem struktur- og attributdirektivet ved at se på syntaksen. Strukturdirektivets navn starter altid med et asterisk (*) præfiks, mens attributdirektivet ikke indeholder noget præfiks. De tre mest populære indbyggede strukturelle direktiver, som Angular giver, er NgIf , NgFor og NgSwitch .

Komponenter

Komponenter er direktiver med skabeloner. Den eneste forskel mellem komponenter og de to andre typer direktiver er skabelonen. Attribut- og strukturdirektiver har ikke skabeloner. Så vi kan sige, at komponenten er en renere version af direktivet med en skabelon, som er lettere at bruge.

Brug af vinkelindbyggede direktiver

Der er mange indbyggede direktiver i Angular, som du nemt kan bruge. I dette afsnit bruger vi to meget enkle indbyggede direktiver.

NgStyle-direktivet er et attributdirektiv, der bruges til at ændre styling af ethvert DOM-element på baggrund af en eller anden tilstand.

I am an Attribute Directive

I ovenstående kodestykke tilføjer vi en blå baggrund, hvis værdien af isBluevariablen er sand. Hvis isBluevariabelens værdi er falsk, vil baggrunden for ovenstående element være rød.

NgIf Directive er et strukturdirektiv, der bruges til at tilføje elementer i DOM i henhold til en eller anden betingelse.

I am a Structural Directive

I ovenstående kodestykke forbliver hele afsnittet i DOM, hvis værdien af showvariablen er sand, ellers starter den fra DOM.

Oprettelse af et tilpasset attributdirektiv

Oprettelse af et brugerdefineret direktiv er ligesom at oprette en kantet komponent. For at oprette et brugerdefineret direktiv skal vi erstatte @Componentdekoratør med @Directivedekoratør.

Så lad os komme i gang med at oprette vores første direktiv om brugerdefineret attribut. I dette direktiv vil vi fremhæve det valgte DOM-element ved at indstille et elements baggrundsfarve.

Opret en app-highlight.directive.tsfil i src/appmappen, og tilføj kodestykket nedenfor.

import { Directive, ElementRef } from '@angular/core';
@Directive({
 selector: '[appHighlight]'
})
export class HighlightDirective {
 constructor(private eleRef: ElementRef) {
 eleRef.nativeElement.style.background = 'red';
 }
}

Her importerer vi Directiveog ElementReffra Angular core. Det Directivegiver funktionaliteten af @Directivedekoratør, hvor vi leverer dens ejendomsvælger til, appHighLightså vi kan bruge denne vælger hvor som helst i applikationen. Vi importerer også det, ElementRefder er ansvarligt for at få adgang til DOM-elementet.

Nu for at få appHighlightDirektiv til at fungere, er vi nødt til at tilføje vores direktiv til erklæringsarrayen i app.module.tsfilen.

import ...;
import { ChangeThemeDirective } from './app-highlight.directive';
@NgModule({
declarations: [
AppComponent,
ChangeThemeDirective
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Nu skal vi bruge vores nyoprettede brugerdefinerede direktiv. Jeg tilføjer appHightlightdirektivet i, app.component.htmlmen du kan bruge det hvor som helst i applikationen.

Highlight Me !

Outputtet fra ovenstående kodestykke vil se sådan ud.

Oprettelse af et brugerdefineret strukturdirektiv

I det foregående afsnit oprettede vi vores første attributdirektiv. Den samme tilgang bruges også til at skabe strukturdirektivet.

Så lad os komme i gang med at oprette vores strukturelle direktiv. I dette direktiv vil vi implementere *appNotdirektivet, som fungerer lige modsat af *ngIf.

Opret nu en app-not.directive.tsfil i src/appmappen og tilføj koden nedenfor.

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
 selector: '[appNot]'
})
export class AppNotDirective {
constructor(
 private templateRef: TemplateRef,
 private viewContainer: ViewContainerRef) { }
 @Input() set appNot(condition: boolean) {
 if (!condition) {
 this.viewContainer.createEmbeddedView(this.templateRef);
 } else {
 this.viewContainer.clear(); }
 }
}

Som du så i ovenstående kodestykke, importerer vi Directive, Input, TemplateRef and ViewContainerReffra@angular/core.

Directivegiver den samme funktionalitet til @Directivedekoratøren. Den Inputdekoratør bruges til at kommunikere mellem de to komponenter. Det sender data fra en komponent til den anden ved hjælp af egenskabsbinding.

TemplateRefrepræsenterer den indlejrede skabelon, der bruges til at instantiere de indlejrede visninger. Disse indlejrede visninger er knyttet til den skabelon, der skal gengives.

ViewContainerRefer en container, hvor en eller flere visninger kan vedhæftes. Vi kan bruge createEmbeddedView()funktionen til at vedhæfte de indlejrede skabeloner i containeren.

Nu for at få appNotdirektivet til at fungere, er vi nødt til at føje vores direktiv til erklæringsarrayet i app.module.tsfilen.

import ...;
import { AppNotDirective } from './app-not.directive';
@NgModule({
declarations: [
AppComponent,
AppNotDirective
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Nu er det tid til at bruge vores nyoprettede strukturdirektiv.

Jeg tilføjer appNotdirektivet i, app.component.htmlmen du kan bruge det hvor som helst i applikationen.

True

False

Det *appNotDirektivet er designet på en måde, at det vedhæfter skabelonen element ind i DOM, hvis *appNotværdien er falselige overfor *ngIfdirektivet.

Outputtet fra ovenstående kodestykke vil se sådan ud.

Jeg håber, at denne artikel besvarede de fleste af dine spørgsmål vedrørende vinkelretningslinjer. Hvis du har spørgsmål eller tvivl, er du velkommen til at kontakte mig i kommentarfeltet.