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.
Cuprins
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, structural și attribute. 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 custom-directives-app.
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 decoratorul @Directive.
Decoratorul @Directive este un decorator TypeScript folosit pentru a crea directive personalizate. Acum creați un fișier highlight.directive.ts în directorul src/app. În acest fișier, veți crea evidențierea directivei personalizate.
De exemplu:
import { Directive } from "@angular/core";@Directive({
selector: "[myHighlight]",
})
export class HighlightDirective {
constructor() {}
}
Blocul de cod de mai sus importă decoratorul Directive din modulul @angular/core. Decoratorul @Directive decorează clasa HighlightDirective. Ia un obiect ca argument cu o proprietate selector.
În acest caz, setați proprietatea selector la [myHighlight] ceea ce înseamnă că puteți aplica această directivă șabloanelor dvs. adăugând atributul myHighlight la un element.
Iată un exemplu despre cum să utilizați directiva în șabloanele dvs.:
<main>
<p myHighlight>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]"
})
export class HighlightDirective {
constructor(private element: ElementRef) {
this.element.nativeElement.style.backgroundColor="lightblue";
}
}
În acest exemplu, constructorul clasei HighlightDirective preia un parametru ElementRef, pe care Angular îl injectează automat. ElementRef oferă acces la elementul DOM subiacent.
Folosind această proprietate.element.nativeElement, accesați elementul DOM nativ al parametrului element. Apoi setați culoarea de fundal a componentei la albastru deschis folosind proprietatea stil. Aceasta înseamnă că orice element la care aplicați directiva myHighlight va avea un fundal albastru deschis.
Pentru a face directiva funcțională, asigurați-vă că o importați și o declarați în fișierul app.module.ts.
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]
})
export class AppModule { }
Acum puteți aplica directiva myHighlight elementelor din componentele dvs. Angular.
<main>
<p myHighlight>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/ în 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 fișierul highlight.directive.ts cu acesta:
import { Directive, ElementRef, Input } from "@angular/core";@Directive({
selector: "[myHighlight]"
})
export class HighlightDirective {
@Input() set myHighlight(color: string) {
this.element.nativeElement.style.backgroundColor = color;
}
constructor(private element: ElementRef) {
}
}
În blocul de cod de mai sus, clasa HighlightDirective conține o metodă setter numită myHighlight. Această metodă ia un parametru de culoare de tip șir. Decorați metoda setter cu decoratorul @Input, permițându-vă să treceți valoarea culorii în directiva din componenta părinte.
Acum puteți determina culoarea de fundal trecând o valoare directivei myHighlight.
De exemplu:
<main>
<p myHighlight="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 randarea condiționată.
În această secțiune, veți crea o directivă structurală personalizată care funcționează ca directiva ngIf. Pentru a face acest lucru, creați un fișier condition.directive.ts.
În fișierul condition.directive.ts, scrieți acest cod:
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'@Directive({
selector: "[condition]"
})
export class ConditionDirective {
@Input() set condition(arg: boolean) {
if(arg) {
this.viewContainer.createEmbeddedView(this.template)
} else {
this.viewContainer.clear();
}
}
constructor(
private template: TemplateRef<unknown>,
private viewContainer: ViewContainerRef
) {}
}
Acest bloc de cod vă permite să randați condiționat elemente prin aplicarea directivei de condiție unui element și transmiterea unei valori booleene de la componenta părinte.
În constructorul clasei ConditionDirective, 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. Metoda createEmbeddedView a clasei ViewContainerRef creează și redă vizualizarea în DOM.
Dacă parametrul este fals, directiva șterge containerul de vizualizare folosind metoda clear a 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 fișierul app.module.ts. 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.:
<main>
<p *condition="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.