Sådan bruges og oprettes tilpassede direktiver i Angular

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

Hvad er et vinkeldirektiv?

Direktiver er de funktioner, der udføres, når Angular compiler finder det. Vinkeldirektiver forbedrer muligheden for HTML-elementer ved at knytte tilpasset adfærd til DOM.

Fra kernekonceptet kategoriseres vinkeldirektiver i tre kategorier.

  1. Attributdirektiver
  2. Strukturdirektiver
  3. komponenter

Attributdirektiver

Attributdirektiver er ansvarlige for at manipulere udseendet og opførslen af ​​DOM-elementer. Vi kan bruge attributdirektiver til at ændre stilen til DOM-elementer. Disse direktiver bruges også til at skjule eller vise bestemte DOM-elementer betinget. Angular leverer 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 for DOM. De fungerer ved at tilføje eller fjerne elementerne fra DOM, i modsætning til attributdirektiver, der bare ændrer elementets udseende og opførsel.

Du kan nemt skelne mellem struktur- og attributdirektivet ved at se på syntaks. Strukturdirektivets navn starter altid med et stjerne-præfiks (*), mens attributdirektivet ikke indeholder nogen præfiks. De tre mest populære indbyggede strukturdirektiver, som Angular leverer, er NgIf, NgFor og NgSwitch.

komponenter

Komponenter er direktiver med skabeloner. Den eneste forskel mellem komponenter og de to andre typer af direktiver er skabelonen. Attributter og strukturelle direktiver 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 vinklede indbyggede direktiver

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

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

 Jeg er et attributdirektiv

I ovenstående kodestykker tilføjer vi en blå baggrund, hvis værdien af ​​isBlue-variablen er sand. Hvis værdien af ​​isBlue-variablen er falsk, vil baggrunden for det ovenstående element være rød.

NgIf-direktivet er et strukturelt direktiv, der bruges til at tilføje elementer i DOM-enheden efter en eller anden betingelse.

Jeg er et strukturdirektiv

I ovenstående kodestykker forbliver hele afsnittet i DOM, hvis værdien af ​​showvariablen er sand, ellers sparkes det fra DOM.

Oprettelse af et tilpasset attributdirektiv

Oprettelse af et tilpasset direktiv er ligesom oprettelse af en vinkelkomponent. For at oprette et brugerdefineret direktiv er vi nødt til at erstatte @Component decorator med @Directive decorator.

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

Opret en app-highlight.directive.ts-fil i src / app-mappen, og tilføj kodestykket nedenfor.

import {Direktiv, ElementRef} fra '@ vinkel / kerne';
@Directive ({
    vælger: '[appHighlight]'
})
eksportklasse HighlightDirective {
    konstruktør (privat eleRef: ElementRef) {
        eleRef.nativeElement.style.background = 'rød';
    }
}

Her importerer vi direktiv og ElementRef fra kantet kerne. Direktivet tilvejebringer funktionaliteten af ​​@Directive decorator, hvor vi leverer dens ejendomsvælger til appHighLight, så vi kan bruge denne vælger overalt i applikationen. Vi importerer også ElementRef, der er ansvarlig for adgang til DOM-elementet.

Nu for at få appHighlight-direktivet til at fungere, er vi nødt til at tilføje vores direktiv til erklæringerne i filen app.module.ts.

import ...;
import {ChangeThemeDirective} fra './app-highlight.directive';
@NgModule ({
erklæringer: [
AppComponent,
ChangeThemeDirective
],
import: [
...
],
udbydere: [],
bootstrap: [AppComponent]
})
eksportklasse AppModule {}

Nu skal vi bruge vores nyoprettede tilpassede direktiv. Jeg tilføjer appHightlight-direktivet i app.component.html, men du kan bruge det hvor som helst i applikationen.

Fremhæv mig!

Outputet fra ovennævnte kodestykket vil se sådan ud.

Oprettelse af et tilpasset strukturelt direktiv

I det forrige 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 skal vi implementere * appNot-direktivet, der fungerer lige overfor * ngIf.

Opret nu en app-not.directive.ts-fil i mappen src / app, og tilføj koden nedenfor.

import {Direktiv, Input, TemplateRef, ViewContainerRef} fra '@ vinkel / kerne';
@Directive ({
    vælger: '[appNot]'
})
eksportklasse AppNotDirective {
konstruktør (
    private templateRef: TemplateRef ,
    private viewContainer: ViewContainerRef) {}
    @Input () sæt appNot (betingelse: boolsk) {
        hvis (! betingelse) {
            this.viewContainer.createEmbeddedView (this.templateRef);
        } andet {
            this.viewContainer.clear ();
        }
    }
}

Som du så i ovenstående kodestykket, importerer vi direktiv, input, TemplateRef og ViewContainerRef fra @ angular / core.

Direktiv giver den samme funktionalitet for @Directive dekoratøren. Input-dekoratøren bruges til at kommunikere mellem de to komponenter. Det sender data fra den ene komponent til den anden ved hjælp af egenskabsbinding.

TemplateRef repræsenterer den indlejrede skabelon, der bruges til at instantisere de integrerede visninger. Disse indlejrede visninger er knyttet til den skabelon, der skal gengives.

ViewContainerRef er 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å appNot-direktivet til at fungere, er vi nødt til at tilføje vores direktiv til erklæringerne i filen app.module.ts.

import ...;
import {AppNotDirective} fra './app-not.directive';
@NgModule ({
erklæringer: [
AppComponent,
AppNotDirective
],
import: [
...
],
udbydere: [],
bootstrap: [AppComponent]
})
eksportklasse AppModule {}

Nu er det tid til at bruge vores nyoprettede strukturelle direktiv.

Jeg tilføjer appNot-direktivet i app.component.html, men du kan bruge det hvor som helst i applikationen.

Sand

Falsk

* AppNot-direktivet er designet på en måde, som det tilføjer skabelonelementet i DOM, hvis * appNot-værdien er falsk lige overfor * ngIf-direktivet.

Outputet fra ovennævnte kodestykket vil se sådan ud.

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