Kuidas nurgas kohandatud direktiive kasutada ja luua

Pärast pikka mängimist Angulariga jõudsin lõpuks arusaadava selgituseni Angulari direktiividest. Selles artiklis saame kõigepealt aru, mis direktiiv täpselt on ja kuidas seda nurkades kasutada. Loome ka oma kohandatud direktiivid. Mida me siis ootame? Sukeldume sellesse sügavale.

Mis on nurkdirektiiv?

Direktiivid on funktsioonid, mida käivitatakse alati, kui nurkkoostaja selle leiab . Nurgadirektiivid parandavad HTML-elementide võimekust, lisades DOM-ile kohandatud käitumisviisid.

Põhikontseptsioonist alates on nurkdirektiivid jaotatud kolme kategooriasse.

  1. Atribuutide direktiivid
  2. Struktuuridirektiivid
  3. Komponendid

Atribuutide direktiivid

Atribuutdirektiivid vastutavad DOM-elementide välimuse ja käitumise manipuleerimise eest. DOM-elementide stiili muutmiseks saame kasutada atribuutdirektiive. Neid direktiive kasutatakse ka teatud DOM-elementide tingimuslikuks peitmiseks või kuvamiseks. Angular pakub paljusid sisseehitatud atribuutide direktiive nagu NgStyle , NgClass jne. Samuti võime soovitud funktsionaalsuse jaoks luua oma kohandatud atribuutide direktiivid.

Struktuuridirektiivid

Struktuurdirektiivid vastutavad DOMi struktuuri muutmise eest. Nad töötavad DOM-i elementide lisamise või eemaldamisega, erinevalt atribuutide direktiividest, mis muudavad lihtsalt elemendi välimust ja käitumist.

Süntaksit vaadates saate struktuuri- ja atribuutdirektiivi hõlpsasti eristada. Struktuuridirektiivi nimi algab alati tärniga (*), samas kui atribuutide direktiiv ei sisalda ühtegi eesliidet. Kolm kõige populaarsemat sisseehitatud Angulari pakutavat struktuurdirektiivi on NgIf , NgFor ja NgSwitch .

Komponendid

Komponendid on mallidega direktiivid. Ainus erinevus komponentide ja ülejäänud kahe direktiivi vahel on mall. Atribuutide ja struktuuridirektiivide mallid puuduvad. Nii võime öelda, et komponent on direktiivi puhtam versioon koos malliga, mida on lihtsam kasutada.

Nurga sisseehitatud direktiivide kasutamine

Angularis on saadaval palju sisseehitatud direktiive, mida saate hõlpsalt kasutada. Selles osas kasutame kahte väga lihtsat sisseehitatud direktiivi.

NgStyle'i direktiiv on atribuutide direktiiv, mida kasutatakse mis tahes DOM-elemendi stiili muutmiseks mõne tingimuse alusel.

I am an Attribute Directive

Kui isBluemuutuja väärtus on tõene , lisame ülaltoodud koodilõigus sinise tausta . Kui isBluemuutuja väärtus on vale, on ülaltoodud elemendi taust punane.

NgIf direktiiv on struktuuriline direktiiv, mida kasutatakse DOM-i elementide lisamiseks vastavalt mõnele tingimusele.

I am a Structural Directive

Ülalolevas koodijupis jääb kogu lõik DOM-i, kui showmuutuja väärtus on tõene, vastasel juhul algab see DOM-ist.

Kohandatud atribuutide direktiivi loomine

Kohandatud direktiivi loomine on täpselt nagu nurkkomponendi loomine. Kohandatud direktiivi loomiseks peame @Componentdekoraatori asendama @Directivedekoraatoriga.

Alustame siis oma esimese kohandatud atribuutide direktiivi loomisega. Selles direktiivis tõstame esile valitud DOM-elemendi, määrates elemendi taustavärvi.

Looge kausta app-highlight.directive.tsfail src/appja lisage koodilõik allpool.

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

Siin impordime Directiveja ElementRefnurga südamikust. See Directivepakub @Directivesisekujundaja funktsionaalsust, mille jaoks pakume oma omaduste valijat appHighLight, et saaksime seda valijat rakenduses kõikjal kasutada. Impordime ka seda, ElementRefmis vastutab DOM-elemendile juurdepääsu eest.

Nüüd, et appHighlightdirektiiv toimiks, peame oma direktiivi lisama app.module.tstoimikus olevate deklaratsioonide massiivi .

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

Nüüd hakkame kasutama oma äsja loodud kohandatud direktiivi. Lisan appHightlightdirektiivi, app.component.htmlkuid saate seda kasutada rakenduses kõikjal.

Highlight Me !

Ülaltoodud koodilõigu väljund näeb välja selline.

Kohandatud struktuuridirektiivi loomine

Eelmises osas lõime oma esimese atribuudidirektiivi. Sama lähenemisviisi kasutatakse ka struktuuridirektiivi loomisel.

Alustame siis oma struktuurilise direktiivi loomisega. Selles direktiivis rakendame *appNotdirektiivi, mis töötab just vastupidiselt *ngIf.

Nüüd looge kausta app-not.directive.tsfail src/appja lisage allolev kood.

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(); }
 }
}

Nagu nägime eespool koodilõiguna oleme importiva Directive, Input, TemplateRef and ViewContainerRefalates@angular/core.

Directivepakub @Directivedekoraatorile sama funktsionaalsust . InputDekoraator kasutatakse suhelda kahe komponendi vahel. See saadab atribuudi sidumise abil andmeid ühest komponendist teise.

TemplateReftähistab manustatud malli, mida kasutatakse manustatud vaadete esilekutsumiseks. Need manustatud vaated on seotud renderdatava malliga.

ViewContainerRefon konteiner, kuhu saab lisada ühe või mitu vaadet. createEmbeddedView()Funktsiooni abil saame konteinerisse manustatud mallid kinnitada.

Nüüd, et appNotdirektiiv tööle hakkaks, peame oma direktiivi lisama app.module.tsfailis olevate deklaratsioonide massiivi .

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

Nüüd on aeg kasutada meie äsja loodud struktuuridirektiivi.

Lisan appNotdirektiivi, app.component.htmlkuid saate seda kasutada rakenduses kõikjal.

True

False

*appNotDirektiiv on kavandatud nii, et see lisab mall element DOM kui *appNotraha on falsejust vastupidine *ngIfdirektiiv.

Ülaltoodud koodilõigu väljund näeb välja selline.

Loodan, et see artikkel vastas enamikule teie nurkdirektiivide küsimustele. Kui teil on küsimusi või kahtlusi, pöörduge julgelt minu poole kommentaarikasti.