Kaip naudoti ir kurti pasirinktines direktyvas „Angular“

Ilgai žaidęs su „Angular“, pagaliau sugalvojau suprantamą „Angular“ direktyvų paaiškinimą. Šiame straipsnyje pirmiausia suprasime, kas yra direktyva ir kaip ją naudoti kampiniu. Mes taip pat sukursime savo individualias direktyvas. Taigi ko mes laukiame? Pasinerkime gilyn į tai.

Kas yra kampinė direktyva?

Direktyvos yra funkcijos, kurios bus vykdomos, kai tik ras „Angular compiler“ . Kampinės direktyvos padidina HTML elementų galimybes, prie DOM pridedant pasirinktinį elgesį.

Iš pagrindinės koncepcijos kampinės direktyvos skirstomos į tris kategorijas.

  1. Atributų direktyvos
  2. Struktūrinės direktyvos
  3. Komponentai

Atributų direktyvos

Atributų direktyvos yra atsakingos už manipuliavimą DOM elementų išvaizda ir elgesiu. DOM elementų stiliui pakeisti galime naudoti atributų direktyvas. Šios direktyvos taip pat naudojamos tam tikriems DOM elementams slėpti arba rodyti sąlygiškai. „Angular“ teikia daugybę integruotų atributų direktyvų, tokių kaip „ NgStyle“ , „ NgClass“ ir kt. Mes taip pat galime sukurti savo priskirtas atributų direktyvas norimai funkcijai.

Struktūrinės direktyvos

Struktūrinės direktyvos yra atsakingos už DOM struktūros pakeitimą. Jie veikia pridedant arba pašalinant elementus iš DOM, skirtingai nuo atributų direktyvų, kurios tiesiog keičia elemento išvaizdą ir elgesį.

Pažvelgus į sintaksę, galite lengvai atskirti Struktūrinę ir Atributų direktyvą. Struktūrinės direktyvos pavadinimas visada prasideda žvaigždute (*), o atributų direktyvoje nėra jokio priešdėlio. Trys populiariausios įmontuotos „Angular“ teikiamos struktūrinės direktyvos yra „ NgIf“ , „ NgFor“ ir „ NgSwitch“ .

Komponentai

Komponentai yra direktyvos su šablonais. Vienintelis komponentų ir kitų dviejų tipų direktyvų skirtumas yra Šablonas. Atributų ir struktūrinėse direktyvose nėra šablonų. Taigi galime sakyti, kad komponentas yra švaresnė direktyvos versija su šablonu, kurį lengviau naudoti.

Naudojant kampines įmontuotas direktyvas

„Angular“ yra daugybė įmontuotų direktyvų, kurias galite lengvai naudoti. Šiame skyriuje naudosime dvi labai paprastas įmontuotas direktyvas.

„NgStyle“ direktyva yra atributų direktyva, naudojama pakeisti bet kurio DOM elemento stilių remiantis tam tikromis sąlygomis.

I am an Attribute Directive

Pirmiau pateiktame kodo fragmente pridedame mėlyną foną, jei isBluekintamojo vertė yra teisinga. Jei isBluekintamojo vertė yra klaidinga, aukščiau esančio elemento fonas bus raudonas.

NgIf direktyva yra struktūrinė direktyva, naudojama tam tikromis sąlygomis pridėti elementus į DOM.

I am a Structural Directive

Pirmiau pateiktame kodo fragmente visa pastraipa išliks DOM, jei showkintamojo reikšmė yra teisinga, priešingu atveju ji bus paleista iš DOM.

Tinkintų atributų direktyvos sukūrimas

Sukurti pasirinktinę direktyvą yra lygiai taip pat kaip sukurti kampinį komponentą. Norėdami sukurti pasirinktinę direktyvą, @Componentdekoratorių turime pakeisti @Directivedekoratoriumi.

Taigi, pradėkime kurti savo pirmąją „Custom Attribute“ direktyvą. Šioje direktyvoje mes paryškinsime pasirinktą DOM elementą nustatydami elemento fono spalvą.

Sukurkite app-highlight.directive.tsfailą src/appaplanke ir pridėkite kodo fragmentą žemiau.

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

Čia mes importuojame Directiveir ElementRefiš kampinio šerdies. Pateikiamas dekoratoriaus Directivefunkcionalumas, @Directivekuriame mes teikiame savo nuosavybės parinkiklį appHighLight, kad galėtume jį naudoti bet kurioje programos vietoje. Mes taip pat importuojame, ElementRefkuris yra atsakingas už prieigą prie DOM elemento.

Norėdami, kad appHighlightdirektyva veiktų, turime pridėti savo direktyvą prie app.module.tsbyloje esančių deklaracijų masyvo .

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

Dabar mes naudosimės naujai sukurta pritaikyta direktyva. Pridedu appHightlightdirektyvą, app.component.htmlbet ją galite naudoti bet kurioje programos vietoje.

Highlight Me !

Minėto kodo fragmento išvestis atrodys taip.

Individualios struktūrinės direktyvos sukūrimas

Ankstesniame skyriuje sukūrėme savo pirmąją atributų direktyvą. Tas pats požiūris naudojamas ir kuriant struktūrinę direktyvą.

Taigi, pradėkime kurti savo struktūrinę direktyvą. Šioje direktyvoje ketiname įgyvendinti *appNotdirektyvą, kuri veiks visiškai priešingai *ngIf.

Dabar sukurkite app-not.directive.tsfailą src/appaplanke ir pridėkite žemiau esantį kodą.

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

Kaip matėte anksčiau pateiktame kodo fragmente, mes importuojame Directive, Input, TemplateRef and ViewContainerRef@angular/core.

Directivesuteikia tą patį @Directivedekoratoriaus funkcionalumą . InputDekoratorius yra naudojamas bendrauti tarp dviejų komponentų. Jis siunčia duomenis iš vieno komponento į kitą naudodamas nuosavybės įrišimą.

TemplateRefžymi įdėtąjį šabloną, kuris naudojamas įterptiems rodiniams sukurti. Šie įterpti rodiniai susieti su pateiktu šablonu.

ViewContainerRefyra talpykla, prie kurios galima pridėti vieną ar daugiau rodinių. Mes galime naudoti createEmbeddedView()funkciją, kad pritvirtintume įdėtus šablonus talpykloje.

Dabar, kad appNotdirektyva veiktų, turime pridėti savo direktyvą prie app.module.tsbyloje esančių deklaracijų masyvo .

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

Dabar atėjo laikas naudoti naujai sukurtą struktūrinę direktyvą.

Pridedu appNotdirektyvą, app.component.htmlbet ją galite naudoti bet kurioje programos vietoje.

True

False

*appNotDirektyva yra suprojektuota taip, kad jis prideda šablono elementas į DOM, jei *appNotreikšmė yra falsepriešais *ngIfdirektyvos.

Minėto kodo fragmento išvestis atrodys taip.

Tikiuosi, kad šis straipsnis atsakė į daugumą jūsų klausimų, susijusių su „Angular“ direktyvomis. Jei turite klausimų ar kyla abejonių, nedvejodami kreipkitės į mane komentarų laukelyje.