Kuidas koostada kohandatud direktiive Angularis

Üks Angulari põhiomadusi on direktiivid. Nurkdirektiivid on viis DOM-i elementidele käitumise lisamiseks. Angular pakub mitmesuguseid sisseehitatud direktiive ja selles tugevas raamistikus saate luua ka kohandatud direktiive.

Mis on direktiivid?

Direktiivid on kohandatud koodid, mida Angular kasutab HTML-elemendi käitumise või välimuse muutmiseks. Saate kasutada juhiseid sündmuste kuulajate lisamiseks, DOM-i muutmiseks või elementide kuvamiseks või peitmiseks.

On kahte tüüpi sisseehitatud direktiivid Angularis, struktuur ja atribuut. Struktuurijuhised muudavad DOM-i struktuuri, atribuudijuhised aga elemendi välimust või käitumist. Direktiivid on võimas viis Angular-komponentide funktsionaalsuse laiendamiseks.

Direktiivide eelised

Siin on mõned Angularis direktiivide kasutamise eelised:

• Korduvkasutatavus: saate kasutada direktiive mitmes komponendis, säästes teie aega ja vaeva.
instagram viewer
• Laiendatavus: saate laiendada direktiive, et lisada uusi funktsioone, muutes oma komponendid võimsamaks.
• Paindlikkus: Direktiive kasutades saate elemendi käitumist või välimust mitmel viisil muuta, mis annab teile rakenduste loomisel palju paindlikkust.

Nurgarakenduse seadistamine

Nurgarakenduse seadistamiseks installige Angular CLI, käivitades terminalis järgmise koodi:

npm install -g @angular/cli

Pärast Angular CLI installimist looge Angular projekt, käivitades järgmise käsu:

ng new custom-directives-app

Ülaltoodud käsu käivitamine loob Angular projekti nimega kohandatud direktiivid-rakendus.

Tollidirektiivi loomine

Nüüd on teil Angular projekt ja saate alustada kohandatud direktiivide loomist. Looge TypeScript-fail ja määrake tähisega kaunistatud klass @direktiiv dekoraator.

The @direktiiv dekoraator on TypeScripti dekoraator, mida kasutatakse kohandatud direktiivide loomiseks. Nüüd loo a highlight.directive.ts faili src/app kataloog. Selles failis loote kohandatud direktiivi esile.

Näiteks:

import { Directive } from"@angular/core";
@Directive({
 selector: "[myHighlight]",
})
exportclassHighlightDirective{
constructor() {}
}

Ülaltoodud koodiplokk impordib direktiiv dekoraator alates @nurkne/tuum moodul. The @direktiiv dekoraator kaunistab Esiletõstmise direktiiv klass. See võtab objekti kui argumendi a-ga valija vara.

Sel juhul määrate valija vara juurde [myHighlight] See tähendab, et saate selle direktiivi oma mallidele rakendada, lisades selle myHighlight atribuut elemendile.

Siin on näide selle kohta, kuidas mallides direktiivi kasutada.

Some text</p>
</main>

Käitumise lisamine direktiivi

Nüüd olete direktiivi edukalt loonud. Järgmine samm on lisada direktiivile käitumine, et see saaks manipuleerida DOM-iga. Teil läheb vaja ElementRef @angular/core, et lisada käskkirjale käitumine.

Sisestate käskkirja konstruktorisse ElementRef. ElementRef on ümbris vaate sees oleva algelemendi ümber.

Siin on näide selle kohta, kuidas lisate käskkirjale käitumise.

import { Directive, ElementRef } from"@angular/core";
@Directive({
 selector: "[myHighlight]"
})
exportclassHighlightDirective{
constructor(private element: ElementRef) {
this.element.nativeElement.style.backgroundColor = 'lightblue';
 }
}

Selles näites ehitaja Esiletõstmise direktiiv klass võtab parameetri ElementRef, mille Angular sisestab automaatselt. ElementRef pakub juurdepääsu aluseks olevale DOM-i elemendile.

Kasutades see.element.nativeElement atribuut, pääsete juurde DOM-i loomulikule elemendile element parameeter. Seejärel määrate komponendi taustavärviks helesinine kasutades stiilis vara. See tähendab, et ükskõik millist elementi te rakendate myHighlight käskkiri to on helesinise taustaga.

Direktiivi toimimiseks importige see kindlasti ja deklareerige see dokumendis app.module.ts faili.

Näiteks:

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]
})
exportclassAppModule{ }

Nüüd saate elementidele rakendada direktiivi myHighlight teie Angular komponentides.

Some text</p>
</main>

Käivitage oma rakendus arendusserveris, et testida, kas direktiiv töötab. Seda saate teha, käivitades terminalis järgmise käsu:

ng serve

Pärast käsu käivitamist navigeerige saidile http://localhost: 4200/ oma veebibrauseris ja näete liidest, mis näeb välja nagu alloleval pildil.

Nurgakujulised sisseehitatud direktiivid aktsepteerivad väärtusi elemendi välimuse muutmiseks, kuid kohandatud direktiiv myHighlight ei ole. Saate konfigureerida direktiivi aktsepteerima väärtust, mida see kasutab malli taustavärvi dünaamiliseks määramiseks.

Selleks asendage kood jaotises highlight.directive.ts faili sellega:

import { Directive, ElementRef, Input } from"@angular/core";
@Directive({
 selector: "[myHighlight]"
})
exportclassHighlightDirective{
 @Input() set myHighlight(color: string) {
this.element.nativeElement.style.backgroundColor = color;
 }
constructor(private element: ElementRef) { 
 }
}

Ülaltoodud koodiplokis on Esiletõstmise direktiiv klass sisaldab setteri meetodit nimega myHighlight. See meetod võtab a värvi tüübistringi parameeter. Kaunistate setteri meetodiga @Sisend dekoraator, mis võimaldab teil edastada põhikomponendist värvi väärtuse direktiivi.

Nüüd saate määrata taustavärvi, edastades väärtuse myHighlight direktiivile.

Näiteks:

'pink'>Some text</p>
</main>

Kohandatud struktuuridirektiivi loomine

Eelmistes jaotistes õppisite, kuidas luua, lisada käitumisi ja rakendada oma mallile kohandatud atribuutide direktiive. Atribuudijuhised muudavad DOM-i elementide välimust, struktuurijuhised aga lisavad, eemaldavad või teisaldavad DOM-i elemente.

Angular pakub kahte struktuuridirektiivi, ngFor ja ngKui. ngFor direktiiv renderdab iga kollektsiooni (massiivi) üksuse jaoks malli, samas kui ngKui käsitleb tingimuslikku renderdamist.

Selles jaotises loote kohandatud struktuurijuhise, mis toimib nagu ngKui direktiiv. Selleks looge a tingimus.direktiiv.ts faili.

Aastal tingimus.direktiiv.ts faili, kirjutage see kood:

import { Directive, Input, TemplateRef, ViewContainerRef } from'@angular/core'
@Directive({
 selector: "[condition]"
})
exportclassConditionDirective{
 @Input() set condition(arg: boolean) {
if(arg) {
this.viewContainer.createEmbeddedView(this.template)
 } else {
this.viewContainer.clear();
 }
 }
constructor(
 private template: TemplateRef, 
 private viewContainer: ViewContainerRef 
 ) {}
}

See koodiplokk võimaldab teil elemente tingimuslikult renderdada, rakendades tingimus käsk elemendile ja tõeväärtuse edastamine emakomponendist.

Aastal ehitaja Tingimuste direktiiv klassi, sisestate eksemplari TemplateRef ja ViewContainerRef. TemplateRef esindab direktiiviga seotud malli ja ViewContainerRef tähistab konteinerit, kus rakendus vaated renderdab.

Klassimääraja meetod ConditionDirective kasutab arg-parameetri kontrollimiseks käsku if else. Direktiiv loob manustatud vaate, kasutades antud malli, kui parameeter on tõene. The createEmbeddedView ViewContainerRef klassi meetod loob ja renderdab vaate DOM-is.

Kui parameeter on vale, tühjendab direktiiv vaatekonteinerit kasutades selge klassi ViewContainerRef meetod. See eemaldab DOM-ist kõik varem renderdatud vaated.

Pärast direktiivi loomist registreerige see oma projektis, importides ja deklareerides selle jaotises app.module.ts faili. Pärast seda saate hakata oma mallides direktiivi kasutama.

Siin on näide selle kohta, kuidas seda oma mallides kasutada.

"true">Hello There!!!</p>
</main>

Nüüd saate luua kohandatud direktiive

Angulari kohandatud direktiivid pakuvad võimsat viisi DOM-iga manipuleerimiseks ja mallidele dünaamilise käitumise lisamiseks. Olete õppinud, kuidas luua ja rakendada oma Angular-rakendustes kohandatud atribuute ja struktuurseid direktiive. Mõistes, kuidas kohandatud direktiive luua ja kasutada, saate Angulari võimalusi täielikult ära kasutada.