Kako koristiti i stvoriti prilagođene smjernice u Angular-u

Nakon dugog igranja s Angulom, napokon sam došao do razumljivog objašnjenja Angular direktiva. U ovom ćemo članku prvo razumjeti što je točno direktiva i kako je koristiti u Angular-u. Stvorit ćemo i vlastite prilagođene direktive. Pa što čekamo? Zaronimo duboko u to.

Što je kutna direktiva?

Direktive su funkcije koje će se izvršavati kad god ih Angular prevodilac pronađe . Kutne direktive poboljšavaju sposobnost HTML elemenata dodavanjem prilagođenih ponašanja DOM-u.

Od temeljnog koncepta, kutne su direktive kategorizirane u tri kategorije.

  1. Smjernice o atributima
  2. Strukturne smjernice
  3. Komponente

Smjernice o atributima

Direktive o atributima odgovorne su za manipuliranje izgledom i ponašanjem DOM elemenata. Pomoću direktiva atributa možemo promijeniti stil DOM elemenata. Te se direktive također koriste za uslovno skrivanje ili prikazivanje određenih DOM elemenata. Angular pruža mnoge ugrađene direktive o atributima poput NgStyle , NgClass itd. Također možemo stvoriti vlastite prilagođene direktive o atributima za željenu funkcionalnost.

Strukturne smjernice

Strukturne direktive odgovorne su za promjenu strukture DOM-a. Oni rade dodavanjem ili uklanjanjem elemenata iz DOM-a, za razliku od direktiva o atributima koje samo mijenjaju izgled i ponašanje elementa.

Uvidom u sintaksu možete jednostavno razlikovati strukturnu i direktivu o atributima. Naziv Strukturne direktive uvijek započinje prefiksom zvjezdice (*), dok Direktiva o atributima ne sadrži nijedan prefiks. Tri najpopularnije ugrađene strukturne smjernice koje pruža Angular su NgIf , NgFor i NgSwitch .

Komponente

Komponente su direktive s predlošcima. Jedina razlika između komponenata i druge dvije vrste direktiva je Predložak. Atributi i strukturne smjernice nemaju predloške. Dakle, možemo reći da je komponenta čišća verzija Direktive s predloškom, koja je lakša za upotrebu.

Korištenje kutnih ugrađenih direktiva

U Angular-u je dostupno puno ugrađenih smjernica koje možete lako koristiti. U ovom ćemo odjeljku koristiti dvije vrlo jednostavne ugrađene smjernice.

NgStyle direktiva je direktiva o atributima koja se koristi za promjenu stila bilo kojeg DOM elementa na temelju nekih uvjeta.

I am an Attribute Directive

U gornji isječak koda dodajemo plavu pozadinu ako je vrijednost isBluevarijable istinita. Ako je vrijednost isBluevarijable false, tada će pozadina gornjeg elementa biti crvena.

NgIf Direktiva je strukturna direktiva koja se koristi za dodavanje elemenata u DOM prema nekim uvjetima.

I am a Structural Directive

U gornjem isječku koda, cijeli će odlomak ostati u DOM-u ako je vrijednost showvarijable true, inače će se pokrenuti iz DOM-a.

Stvaranje Direktive o prilagođenim atributima

Stvaranje prilagođene direktive je isto kao stvaranje Angular komponente. Da bismo stvorili prilagođenu direktivu, @Componentdekorator moramo zamijeniti @Directivedekoraterom.

Dakle, krenimo s izradom naše prve direktive Prilagođeni atribut. U ovoj ćemo direktivi istaknuti odabrani DOM element postavljanjem boje pozadine elementa.

Stvorite app-highlight.directive.tsdatoteku u src/appmapi i dodajte isječak koda u nastavku.

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

Ovdje uvozimo Directivei ElementRefiz kutne jezgre. DirectivePruža funkcionalnost @Directivedekoraciju u kojem pružamo svoj odabir vlasništvu kako bi appHighLight, tako da možemo koristiti ovu izbornu bilo gdje u primjeni. Uvozimo i ElementRefkoji je odgovoran za pristup elementu DOM.

Sada da bi appHighlightDirektiva djelovala, moramo dodati našu Direktivu u niz deklaracija u app.module.tsdatoteci.

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

Sada ćemo koristiti našu novostvorenu prilagođenu direktivu. Dodajem appHightlightdirektivu u, app.component.htmlali možete je koristiti bilo gdje u aplikaciji.

Highlight Me !

Izlaz gornjeg isječka koda izgledat će ovako.

Stvaranje prilagođene strukturne direktive

U prethodnom smo odjeljku stvorili prvu atributnu direktivu. Isti se pristup koristi i za stvaranje strukturne direktive.

Dakle, krenimo s izradom naše strukturne direktive. U ovoj ćemo direktivi provesti *appNotdirektivu koja će raditi upravo suprotno od nje *ngIf.

Sada stvorite app-not.directive.tsdatoteku u src/appmapi i dodajte kod u nastavku.

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

Kao što ste vidjeli u gornjem isječku koda, uvozimo Directive, Input, TemplateRef and ViewContainerRefiz@angular/core.

Directivepruža istu funkcionalnost za @Directivedekoratera. InputDekoraciju koristi za komunikaciju između dvije komponente. Šalje podatke iz jedne komponente u drugu pomoću povezivanja svojstava.

TemplateRefpredstavlja ugrađeni predložak koji se koristi za instanciranje ugrađenih pogleda. Ovi ugrađeni pogledi povezani su s predloškom koji se treba generirati.

ViewContainerRefje spremnik u koji se može priložiti jedan ili više pogleda. Pomoću createEmbeddedView()funkcije možemo priložiti ugrađene predloške u spremnik.

Sada da bi appNotdirektiva djelovala, moramo dodati našu direktivu u niz deklaracija u app.module.tsdatoteci.

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

Sada je vrijeme da upotrijebimo našu novostvorenu strukturnu direktivu.

Dodajem appNotdirektivu u, app.component.htmlali možete je koristiti bilo gdje u aplikaciji.

True

False

*appNotDirektiva je osmišljen na način da se pripaja predložak elementa u DOM ako je *appNotvrijednost falsenasuprot *ngIfdirektive.

Izlaz gornjeg isječka koda izgledat će ovako.

Nadam se da je ovaj članak odgovorio na većinu vaših pitanja u vezi s Angular direktivama. Ako imate bilo kakvih pitanja ili nedoumica, slobodno me kontaktirajte u okviru za komentare.