Hvordan bruke og lage tilpassede direktiver i Angular

Etter å ha spilt med Angular i lang tid, kom jeg til slutt med en forståelig forklaring på Angular-direktiver. I denne artikkelen vil vi først forstå hva et direktiv akkurat er, og hvordan du bruker det i Angular. Vi vil også lage våre egne tilpassede direktiver. Så hva venter vi på? La oss dykke dypt inn i det.

Hva er et vinkeldirektiv?

Direktiver er funksjonene som skal utføres når Angular compiler finner den . Vinkeldirektiver forbedrer muligheten for HTML-elementer ved å knytte tilpasset atferd til DOM.

Fra kjernekonseptet er vinklede direktiver kategorisert i tre kategorier.

  1. Attributtdirektiver
  2. Strukturdirektiver
  3. Komponenter

Attributtdirektiver

Attributtdirektiver er ansvarlige for å manipulere utseendet og oppførselen til DOM-elementer. Vi kan bruke attributtdirektiver for å endre stilen på DOM-elementer. Disse direktivene brukes også til å skjule eller vise bestemte DOM-elementer betinget. Angular gir mange innebygde attributtdirektiver som NgStyle , NgClass , etc. Vi kan også lage våre egne egendefinerte attributtdirektiver for ønsket funksjonalitet.

Strukturdirektiver

Strukturdirektiver er ansvarlige for å endre strukturen til DOM. De fungerer ved å legge til eller fjerne elementene fra DOM, i motsetning til attributtdirektiver som bare endrer elementets utseende og oppførsel.

Du kan enkelt skille mellom struktur- og attributtdirektivet ved å se på syntaksen. Strukturdirektivets navn starter alltid med et stjerne (*) prefiks, mens attributtdirektivet ikke inneholder noe prefiks. De tre mest populære innebygde strukturdirektivene Angular gir er NgIf , NgFor og NgSwitch .

Komponenter

Komponenter er direktiver med maler. Den eneste forskjellen mellom komponenter og de to andre typene direktiver er malen. Attributt- og strukturdirektiver har ikke maler. Så vi kan si at komponenten er en renere versjon av direktivet med en mal, som er enklere å bruke.

Bruke vinklede innebygde direktiver

Det er mange innebygde direktiver tilgjengelig i Angular som du enkelt kan bruke. I denne delen vil vi bruke to veldig enkle innebygde direktiver.

NgStyle Directive er et attributtdirektiv som brukes til å endre utformingen av ethvert DOM-element på grunnlag av en eller annen tilstand.

I am an Attribute Directive

I kodebiten ovenfor legger vi til en blå bakgrunn hvis verdien av isBluevariabelen er sann. Hvis verdien av isBluevariabelen er falsk, vil bakgrunnen til elementet ovenfor være rød.

NgIf Directive er et strukturdirektiv som brukes til å legge til elementer i DOM i henhold til noen forhold.

I am a Structural Directive

I kodebiten ovenfor forblir hele avsnittet i DOM hvis verdien av showvariabelen er sann, ellers starter den fra DOM.

Opprette et tilpasset attributtdirektiv

Å lage et tilpasset direktiv er akkurat som å lage en kantet komponent. For å lage et tilpasset direktiv må vi erstatte @Componentdekoratør med @Directivedekoratør.

Så la oss komme i gang med å lage vårt første direktiv om tilpassede attributter. I dette direktivet skal vi markere det valgte DOM-elementet ved å sette bakgrunnsfargen til et element.

Opprett en app-highlight.directive.tsfil i src/appmappen og legg til kodebiten 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 Directivegir funksjonaliteten til @Directivedekoratøren der vi gir eiendomsvelgeren til, appHighLightslik at vi kan bruke denne velgeren hvor som helst i applikasjonen. Vi importerer også det ElementRefsom er ansvarlig for tilgang til DOM-elementet.

Nå for å få appHighlightDirektiv til å fungere, må vi legge til direktivet vårt i erklæringsoppstillingen i app.module.tsfilen.

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

Nå skal vi bruke vårt nyopprettede tilpassede direktiv. Jeg legger til appHightlightdirektivet i, app.component.htmlmen du kan bruke det hvor som helst i applikasjonen.

Highlight Me !

Utdataene fra kodebiten ovenfor vil se slik ut.

Lage et tilpasset strukturdirektiv

I forrige avsnitt opprettet vi vårt første attributtdirektiv. Den samme tilnærmingen brukes også til å lage strukturdirektivet.

Så la oss komme i gang med å lage vårt strukturdirektiv. I dette direktivet skal vi implementere *appNotdirektivet som vil fungere akkurat motsatt av *ngIf.

Opprett nå en app-not.directive.tsfil i src/appmappen og legg til 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 kodebiten ovenfor, importerer vi Directive, Input, TemplateRef and ViewContainerReffra@angular/core.

Directivegir den samme funksjonaliteten for @Directivedekoratøren. Den Inputarkitekt brukes til å kommunisere mellom de to komponentene. Den sender data fra en komponent til den andre ved hjelp av eiendomsbinding.

TemplateRefrepresenterer den innebygde malen som brukes til å instantiere de innebygde visningene. Disse innebygde visningene er knyttet til malen som skal gjengis.

ViewContainerRefer en container der en eller flere visninger kan festes. Vi kan bruke createEmbeddedView()funksjonen til å feste de innebygde malene i beholderen.

Nå for å få appNotdirektivet til å fungere, må vi legge til vårt direktiv i erklæringsmatrisen i app.module.tsfilen.

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

Nå er det på tide å bruke vårt nyopprettede strukturdirektiv.

Jeg legger til appNotdirektivet i, app.component.htmlmen du kan bruke det hvor som helst i applikasjonen.

True

False

Den *appNotDirektivet er utformet på en slik måte at det legger malen element inn i DOM hvis *appNotverdien er falserett overfor *ngIfdirektivet.

Utdataene fra kodebiten ovenfor vil se slik ut.

Jeg håper denne artikkelen svarte på de fleste spørsmålene dine angående Angular-direktiver. Hvis du har spørsmål eller tvil, kan du kontakte meg i kommentarfeltet.