Cum să construiți directive personalizate în Angular

Una dintre caracteristicile cheie ale Angular sunt directivele. Directivele unghiulare sunt o modalitate prin care puteți adăuga un comportament elementelor DOM. Angular oferă o varietate de directive încorporate și, de asemenea, puteți crea directive personalizate în acest cadru robust.

Ce sunt directivele?

Directivele sunt coduri personalizate pe care Angular le folosește pentru a modifica comportamentul sau aspectul unui element HTML. Puteți folosi directive pentru a adăuga ascultători de evenimente, pentru a schimba DOM-ul sau pentru a afișa sau a ascunde elemente.

Există două tipuri de directive încorporate în Angular, structurale și atribute. Directivele structurale modifică structura DOM, în timp ce directivele de atribut modifică aspectul sau comportamentul unui element. Directivele sunt o modalitate puternică de a extinde funcționalitatea componentelor Angular.

Beneficiile directivelor

Iată câteva dintre beneficiile utilizării directivelor în Angular:

• Reutilizabilitate: Puteți utiliza directive în mai multe componente, economisind timp și efort.
• Extensibilitate: Puteți extinde directivele pentru a adăuga noi funcționalități, făcând componentele dvs. mai puternice.
• Flexibilitate: Folosind directive, puteți modifica comportamentul sau aspectul unui element în diferite moduri, oferindu-vă multă flexibilitate atunci când vă construiți aplicațiile.

Configurarea aplicației dvs. unghiulare

Pentru a configura o aplicație Angular, instalați Angular CLI rulând următorul cod în terminalul dvs.:

npm install -g @angular/cli

După instalarea CLI Angular, creați un proiect Angular rulând următoarea comandă:

ng new custom-directives-app

Rularea comenzii de mai sus va crea un proiect Angular numit aplicație-directive-personalizate.

Crearea unei directive vamale

Acum aveți un proiect Angular și puteți începe să vă creați directivele personalizate. Creați un fișier TypeScript și definiți o clasă decorată cu @Directivă decorator.

The @Directivă decorator este un decorator TypeScript folosit pentru a crea directive personalizate. Acum creați un evidenția.directivă.ts dosar în src/app director. În acest fișier, veți crea directiva personalizată a evidentia.

De exemplu:

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

Blocul de cod de mai sus importă Directivă decorator din @unghiular/nucleu modul. The @Directivă decoratorul decorează HighlightDirective clasă. Ia un obiect ca argument cu a selector proprietate.

În acest caz, setați selector proprietate la [myHighlight] ceea ce înseamnă că puteți aplica această directivă șabloanelor dvs. prin adăugarea myHighlight atributul unui element.

Iată un exemplu despre cum să utilizați directiva în șabloanele dvs.:

Some text</p>
</main>

Adăugarea unui comportament la directivă

Acum ați creat cu succes o directivă. Următorul pas este să adăugați un comportament directivei astfel încât să poată manipula DOM-ul. Veți avea nevoie de ElementRef de la @angular/core pentru a adăuga un comportament la o directivă.

Veți injecta ElementRef în constructorul directivei. ElementRef este un înveliș în jurul unui element nativ în interiorul unei vizualizări.

Iată un exemplu despre cum adăugați un comportament la o directivă:

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

În acest exemplu, constructorul HighlightDirective clasa preia un parametru ElementRef, pe care Angular îl injectează automat. ElementRef oferă acces la elementul DOM subiacent.

Folosind acest.element.nativeElement proprietate, accesați elementul DOM nativ al element parametru. Apoi setați culoarea de fundal a componentei la albastru deschis folosind stil proprietate. Aceasta înseamnă că indiferent de elementul pe care îl aplicați myHighlight directivă să aibă un fundal albastru deschis.

Pentru a face directiva funcțională, asigurați-vă că o importați și o declarați în aplicație.modul.ts fişier.

De exemplu:

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

Acum puteți aplica directiva myHighlight elementelor în componentele dvs. unghiulare.

Some text</p>
</main>

Rulați aplicația pe serverul de dezvoltare pentru a testa dacă directiva este funcțională. Puteți face acest lucru rulând următoarea comandă în terminalul dvs.:

ng serve

După ce rulați comanda, navigați la http://localhost: 4200/ pe browserul dvs. web și veți vedea o interfață care arată ca imaginea de mai jos.

Directivele încorporate unghiulare acceptă valori pentru a schimba aspectul elementului, dar directiva personalizată myHighlight nu. Puteți configura directiva să accepte o valoare pe care o va folosi pentru a seta dinamic culoarea de fundal a șablonului.

Pentru a face acest lucru, înlocuiți codul din evidenția.directivă.ts fisier cu asta:

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

În blocul de cod de mai sus, HighlightDirective clasa conține o metodă setter numită myHighlight. Această metodă necesită a culoare parametrul șirului de tip. Decorezi metoda setter cu @Intrare decorator, permițându-vă să treceți valoarea culorii în directiva de la componenta părinte.

Acum puteți determina culoarea de fundal trecând o valoare directivei myHighlight.

De exemplu:

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

Crearea unei directive structurale personalizate

În secțiunile anterioare, ați învățat cum să creați, să adăugați comportamente și să aplicați directive de atribute personalizate șablonului dvs. Directivele de atribut modifică aspectul elementelor DOM, în timp ce directivele structurale adaugă, elimină sau mută elemente în DOM.

Angular oferă două directive structurale, ngFor și ngIf. Directiva ngFor redă un șablon pentru fiecare articol dintr-o colecție (matrice), în timp ce ngIf se ocupă de redarea condiționată.

În această secțiune, veți crea o directivă structurală personalizată care funcționează ca ngIf directivă. Pentru a face acest lucru, creați un stare.directiva.ts fişier.

În stare.directiva.ts fisier, scrieti acest cod:

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

Acest bloc de cod vă permite să randați condiționat elemente prin aplicarea codului condiție directivă unui element și transmiterea unei valori booleene de la componenta părinte.

În constructorul CondițieDirectiva clasa, injectați o instanță de TemplateRef și ViewContainerRef. TemplateRef reprezintă șablonul asociat directivei, iar ViewContainerRef reprezintă containerul în care aplicația redă vizualizările.

Metoda de setare a clasei ConditionDirective folosește o instrucțiune if else pentru a verifica parametrul arg. Directiva creează o vizualizare încorporată folosind șablonul furnizat dacă parametrul este adevărat. The createEmbeddedView metoda clasei ViewContainerRef creează și redă vizualizarea în DOM.

Dacă parametrul este fals, directiva șterge containerul de vizualizare folosind clar metoda clasei ViewContainerRef. Aceasta elimină toate vizualizările redate anterior din DOM.

După crearea directivei, înregistrați-o în proiectul dumneavoastră importând-o și declarând-o în aplicație.modul.ts fişier. După ce faceți acest lucru, puteți începe să utilizați directiva în șabloanele dvs.

Iată un exemplu despre cum să îl utilizați în șabloanele dvs.:

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

Acum puteți crea directive personalizate

Directivele personalizate din Angular oferă o modalitate puternică de a manipula DOM și de a adăuga un comportament dinamic șabloanelor dvs. Ați învățat cum să creați și să aplicați atribute personalizate și directive structurale în aplicațiile dvs. Angular. Înțelegând cum să creați și să utilizați directive personalizate, puteți profita din plin de capacitățile Angular.