Kā izveidot pielāgotas direktīvas Angular

Viena no galvenajām Angular iezīmēm ir direktīvas. Leņķiskās direktīvas ir veids, kā DOM elementiem pievienot uzvedību. Angular nodrošina dažādas iebūvētas direktīvas, un jūs varat arī izveidot pielāgotas direktīvas šajā spēcīgajā sistēmā.

Kas ir direktīvas?

Direktīvas ir pielāgoti kodi, ko Angular izmanto, lai mainītu HTML elementa darbību vai izskatu. Varat izmantot direktīvas, lai pievienotu notikumu uztvērējus, mainītu DOM vai rādītu vai paslēptu elementus.

Ir divu veidu iebūvētās direktīvas Angular, struktūra un atribūts. Strukturālās direktīvas maina DOM struktūru, savukārt atribūtu direktīvas maina elementa izskatu vai uzvedību. Direktīvas ir spēcīgs veids, kā paplašināt Angular komponentu funkcionalitāti.

Direktīvas priekšrocības

Šeit ir dažas priekšrocības, ko sniedz direktīvu izmantošana Angular:

• Atkārtota izmantošana: varat izmantot direktīvas vairākos komponentos, ietaupot laiku un pūles.
instagram viewer
• Paplašināmība: varat paplašināt direktīvas, lai pievienotu jaunas funkcionalitātes, padarot komponentus jaudīgākus.
• Elastīgums: Izmantojot direktīvas, varat dažādos veidos mainīt elementa uzvedību vai izskatu, sniedzot jums lielu elastību, veidojot lietojumprogrammas.

Leņķiskās lietojumprogrammas iestatīšana

Lai iestatītu Angular lietojumprogrammu, instalējiet Angular CLI, terminālī izpildot šādu kodu:

npm install -g @angular/cli

Pēc Angular CLI instalēšanas izveidojiet Angular projektu, izpildot šādu komandu:

ng new custom-directives-app

Palaižot iepriekš minēto komandu, tiks izveidots Angular projekts ar nosaukumu pielāgotas direktīvas lietotne.

Pielāgotas direktīvas izveide

Tagad jums ir Angular projekts un varat sākt veidot pielāgotas direktīvas. Izveidojiet TypeScript failu un definējiet klasi, kas dekorēta ar @Direktīva dekorators.

The @Direktīva dekorators ir TypeScript dekorētājs, ko izmanto, lai izveidotu pielāgotas direktīvas. Tagad izveidojiet a izcelt.direktīva.ts failu mapē src/app direktoriju. Šajā failā jūs izveidosit pielāgotu direktīvu izcelt.

Piemēram:

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

Iepriekš esošais koda bloks importē direktīva dekorators no @angular/core modulis. The @Direktīva dekorators rotā HighlightDirective klasē. Tas uztver objektu kā argumentu ar a atlasītājs īpašums.

Šajā gadījumā jūs iestatāt atlasītājs īpašumu uz [myHighlight] tas nozīmē, ka varat lietot šo direktīvu savām veidnēm, pievienojot myHighlight atribūts elementam.

Šeit ir piemērs, kā izmantot direktīvu savās veidnēs:

Some text</p>
</main>

Uzvedības pievienošana direktīvai

Tagad esat veiksmīgi izveidojis direktīvu. Nākamais solis ir pievienot direktīvai uzvedību, lai tā varētu manipulēt ar DOM. Jums būs nepieciešams ElementRef no @angular/core, lai pievienotu direktīvai uzvedību.

Jūs ievadīsit ElementRef direktīvas konstruktorā. ElementRef ir iesaiņojums ap sākotnējo elementu skatā.

Tālāk ir sniegts piemērs tam, kā direktīvai pievienot darbību.

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

Šajā piemērā konstruktors HighlightDirective klase ņem ElementRef parametru, ko Angular automātiski ievada. ElementRef nodrošina piekļuvi pamatā esošajam DOM elementam.

Izmantojot this.element.nativeElement īpašumu, jūs piekļūstat vietējam DOM elementam elements parametrs. Pēc tam iestatiet komponenta fona krāsu uz gaiši zils izmantojot stils īpašums. Tas nozīmē, ka neatkarīgi no tā, kādu elementu izmantojat myHighlight direktīvai būs gaiši zils fons.

Lai direktīva būtu funkcionāla, importējiet to un deklarējiet to app.module.ts failu.

Piemēram:

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{ }

Tagad elementiem varat lietot direktīvu myHighlight jūsu Angular komponentos.

Some text</p>
</main>

Palaidiet lietojumprogrammu izstrādes serverī, lai pārbaudītu, vai direktīva darbojas. To var izdarīt, terminālī izpildot šādu komandu:

ng serve

Pēc komandas palaišanas dodieties uz http://localhost: 4200/ savā tīmekļa pārlūkprogrammā, un jūs redzēsit interfeisu, kas izskatās kā tālāk redzamajā attēlā.

Leņķiskās iebūvētās direktīvas pieņem vērtības, lai mainītu elementu izskatu, bet pielāgotās direktīvas myHighlight nav. Varat konfigurēt direktīvu, lai tā pieņemtu vērtību, ko tā izmantos, lai dinamiski iestatītu veidnes fona krāsu.

Lai to izdarītu, nomainiet kodu mapē izcelt.direktīva.ts fails ar šo:

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

Iepriekš esošajā koda blokā HighlightDirective klase satur settera metodi, ko sauc myHighlight. Šī metode aizņem a krāsa tipa virknes parametrs. Jūs izrotāt setera metodi ar @Ievade dekorators, kas ļauj nodot krāsas vērtību direktīvā no vecākkomponenta.

Tagad varat noteikt fona krāsu, nododot vērtību myHighlight direktīvai.

Piemēram:

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

Pielāgotas strukturālās direktīvas izveide

Iepriekšējās sadaļās jūs uzzinājāt, kā izveidot, pievienot darbības un lietot pielāgotu atribūtu direktīvas savai veidnei. Atribūtu direktīvas maina DOM elementu izskatu, savukārt strukturālās direktīvas pievieno, noņem vai pārvieto elementus DOM.

Angular nodrošina divas strukturālas direktīvas, ngFor un ngJa. ngFor direktīva atveido veidni katram kolekcijas vienumam (masīvam), savukārt ngJa apstrādā nosacījumu renderēšanu.

Šajā sadaļā jūs izveidosit pielāgotu strukturālu direktīvu, kas darbojas kā ngJa direktīva. Lai to izdarītu, izveidojiet a nosacījums.direktīva.ts failu.

Iekš nosacījums.direktīva.ts failu, ierakstiet šo kodu:

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

Šis koda bloks ļauj nosacīti renderēt elementus, izmantojot stāvokli direktīvu elementam un nodod Būla vērtību no vecākkomponenta.

Konstruktorā Nosacījumu direktīva klasē, jūs ievadāt gadījumu TemplateRef un ViewContainerRef. TemplateRef apzīmē ar direktīvu saistīto veidni, un ViewContainerRef ir konteiners, kurā lietojumprogramma atveido skatus.

Klases iestatītāja metode ConditionDirective izmanto priekšrakstu if else, lai pārbaudītu parametru arg. Ja parametrs ir patiess, direktīva izveido iegultu skatu, izmantojot sniegto veidni. The CreateEmbeddedView ViewContainerRef klases metode izveido un atveido skatu DOM.

Ja parametrs ir viltus, direktīva notīra skata konteineru, izmantojot skaidrs ViewContainerRef klases metode. Tādējādi no DOM tiek noņemti visi iepriekš renderētie skati.

Pēc direktīvas izveides reģistrējiet to savā projektā, importējot un deklarējot to app.module.ts failu. Pēc šīs darbības varat sākt izmantot direktīvu savās veidnēs.

Šeit ir piemērs, kā to izmantot savās veidnēs:

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

Tagad varat izveidot pielāgotas direktīvas

Angular pielāgotās direktīvas nodrošina efektīvu veidu, kā manipulēt ar DOM un pievienot veidnēm dinamisku darbību. Jūs esat iemācījušies izveidot un lietot pielāgotus atribūtus un strukturālās direktīvas savās Angular lietojumprogrammās. Izprotot, kā izveidot un izmantot pielāgotas direktīvas, varat pilnībā izmantot Angular iespējas.