de Gulfam Ansari

După ce am jucat mult timp cu Angular, am venit în cele din urmă cu o explicație de înțeles a directivelor Angular. În acest articol, vom înțelege mai întâi ce este exact o directivă și cum să o folosim în Angular. Vom crea și propriile noastre directive personalizate. Deci, ce așteptăm? Să ne scufundăm adânc în el.

Ce este o directivă unghiulară?

Directivele sunt funcțiile care se vor executa ori de câte ori compilatorul Angular le găsește. Directivele unghiulare sporesc capacitatea elementelor HTML prin atașarea comportamentelor personalizate la DOM.

Din conceptul de bază, directivele angulare sunt clasificate în trei categorii.

  1. Directivele privind atributele
  2. Directivele structurale
  3. Componente

Directivele privind atributele

Directivele privind atributele sunt responsabile pentru manipularea aspectului și comportamentului elementelor DOM. Putem folosi directive de atribut pentru a schimba stilul elementelor DOM. Aceste directive sunt, de asemenea, utilizate pentru a ascunde sau a arăta condiționat anumite elemente DOM. Angular oferă multe directive încorporate, cum ar fi NgStyle, NgClass, etc. Putem crea, de asemenea, propriile noastre directive de atribute personalizate pentru funcționalitatea dorită.

Directivele structurale

Directivele structurale sunt responsabile pentru schimbarea structurii DOM. Acestea funcționează prin adăugarea sau eliminarea elementelor din DOM, spre deosebire de Directivele privind atributele care doar modifică aspectul și comportamentul elementului.

Puteți diferenția cu ușurință între Directiva structurală și cea a atributelor, analizând sintaxa. Numele Directivei Structurale începe întotdeauna cu un asterisc prefix, în timp ce Directiva privind atributele nu conține niciun prefix. Cele mai populare trei directive structurale încorporate pe care le oferă Angular suntNgIf ,NgPentru , șiNgSwitch

.

Componente

Componentele sunt directive cu șabloane. Singura diferență între componente și celelalte două tipuri de directive este șablonul. Atributele și directivele structurale nu au șabloane. Deci, putem spune că componenta este o versiune mai curată a directivei cu un șablon, care este mai ușor de utilizat.

Utilizarea directivelor încorporate unghiulare

Există o mulțime de directive încorporate disponibile în Angular pe care le puteți utiliza cu ușurință. În această secțiune, vom folosi două directive foarte simple încorporate. Directiva NgStyle

<p [ngStyle]="{'background': isBlue ? 'blue' : 'red'}"> I am an Attribute Directive</p>

este o directivă de atribute folosită pentru a schimba stilul oricărui element DOM pe baza unor condiții. isBlue În fragmentul de cod de mai sus, adăugăm un fundal albastru dacă valoarea lui isBlue variabila este adevărată. Dacă valoarea lui

variabila este falsă, apoi fundalul elementului de mai sus va fi roșu. Directiva NgIf

<p *ngIf="show">I am a Structural Directive</p>

este o directivă structurală utilizată pentru a adăuga elemente în DOM în funcție de anumite condiții. show În fragmentul de cod de mai sus, întregul paragraf va rămâne în DOM dacă valoarea lui

variabila este adevărată, altfel va începe din DOM.

Crearea unei directive privind atributele personalizate @Component Crearea unei directive personalizate este la fel ca crearea unei componente unghiulare. Pentru a crea o directivă personalizată trebuie să o înlocuim @Directive decorator cu

decorator.

Deci, să începem cu crearea primei noastre directive Custom Attribute. În această directivă, vom evidenția elementul DOM selectat prin setarea culorii de fundal a unui element. app-highlight.directive.ts Creaza un src/app înregistrați în

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

dosar și adăugați fragmentul de cod mai jos. Directive Aici, importăm ElementRef și Directive din nucleul unghiular. @Directive oferă funcționalitatea appHighLight decorator în care oferim selectorul său de proprietate către ElementRef astfel încât să putem folosi acest selector oriunde în aplicație. De asemenea, importăm

care este responsabil pentru accesarea elementului DOM. appHighlight Acum pentru a obține app.module.ts Directiva funcționează, trebuie să adăugăm directiva noastră la matricea de declarații din

import ...;
import { ChangeThemeDirective } from './app-highlight.directive';
@NgModule({
fişier. [
AppComponent,
ChangeThemeDirective
]declarații:
, [
...
]importuri:
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

, appHightlight Acum vom folosi noua noastră directivă personalizată. Am adăugat app.component.html directivă în

<h1 appHightlight>Highlight Me !</h1>

dar îl puteți folosi oriunde în aplicație.

Cum se utilizeaza si se creeaza directive personalizate in Angular

Ieșirea fragmentului de cod de mai sus va arăta astfel.

Crearea unei directive structurale personalizate

În secțiunea anterioară, am creat prima noastră directivă privind atributele. Aceeași abordare este utilizată și pentru a crea directiva structurală. *appNot Deci, să începem cu crearea directivei noastre structurale. În această directivă, vom implementa *ngIfdirectivă care va funcționa chiar opus

. app-not.directive.ts Acum creați un src/app fișier în

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
    selector: '[appNot]'
})
export class AppNotDirective {
constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef) { }
    @Input() set appNot(condition: boolean) {
        if (!condition) {
            this.viewContainer.createEmbeddedView(this.templateRef);
        } else {
            this.viewContainer.clear();        }
    }
}

folder și adăugați codul de mai jos. Directive, Input, TemplateRef and ViewContainerRef După cum ați văzut în fragmentul de cod de mai sus, importăm @angular/core.

Directive din @Directive oferă aceeași funcționalitate pentru Input decorator.

TemplateRef decoratorul este folosit pentru a comunica între cele două componente. Trimite date de la o componentă la alta folosind legarea proprietăților.

ViewContainerRef reprezintă șablonul încorporat care este utilizat pentru a crea instanțierea vizualizărilor încorporate. Aceste vizualizări încorporate sunt legate de șablonul care urmează să fie redat. createEmbeddedView() este un container unde se pot atașa una sau mai multe vederi. Putem folosi

funcție pentru a atașa șabloanele încorporate în container. appNot Acum pentru a obține app.module.ts directivă să funcționeze, trebuie să adăugăm directiva noastră la matricea de declarații din

import ...;
import { AppNotDirective } from './app-not.directive';
@NgModule({
fişier. [
AppComponent,
AppNotDirective
]declarații:
, [
...
]importuri:
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

,

Acum, este timpul să folosim noua noastră directivă structurală. appNot Am adăugat app.component.html directivă în

<h1 *appNot="true">True</h1><h1 *appNot="false">False</h1>

dar îl puteți folosi oriunde în aplicație. *appNot *appNot directiva este concepută într-un mod în care adaugă elementul șablon în DOM dacă false valoarea este *ngIf chiar vizavi de

directivă.

1611616807 547 Cum se utilizeaza si se creeaza directive personalizate in Angular

Ieșirea fragmentului de cod de mai sus va arăta astfel.