Directives a dhíorthaíonn iompar nó a mhodhnú na n-eilimintí sa DOM. Tá trí chineál ann i Angular: components (directives le template), directives struchtúrtha (athrú a dhéanamh ar leagan amach an DOM), agus directives tréithe (athrú a dhéanamh ar chuma/iompar).
Cuireann siad eilimintí leis nó bhaineann siad eilimintí, agus tá préamhfhocal orthu:
*<p *ngIf="isLoggedIn">Welcome back!</p> <!-- add/remove based on condition -->
<li *ngFor="let item of items; let i = index"> <!-- repeat an element per item -->
{{ i }}: {{ item.name }}
</li>
<div [ngSwitch]="status">
<p *ngSwitchCase="'active'">Active</p>
<p *ngSwitchDefault>Unknown</p>
</div>
(Soláthraíonn Angular nua-aimseartha an comhréir rialúchán sreafa níos nuaí @if / @for a chuirtear in ionad *ngIf/*ngFor freisin.)
Modhnaíonn siad eilimint atá ann cheana féin gan í a chur leis/a bhaint:
<div [ngClass]="{ active: isActive, error: hasError }">...</div> <!-- toggle classes -->
<div [ngStyle]="{ color: textColor }">...</div> <!-- dynamic styles -->
<input [(ngModel)]="name" /> <!-- two-way binding -->
import { Directive, ElementRef, HostListener } from "@angular/core";
@Directive({ selector: "[appHighlight]" }) // used as <p appHighlight>
export class HighlightDirective {
constructor(private el: ElementRef) {}
@HostListener("mouseenter") onEnter() {
this.el.nativeElement.style.background = "yellow"; // change the host element
}
@HostListener("mouseleave") onLeave() {
this.el.nativeElement.style.background = "";
}
}
Faigheann directive dhúshlánaithe tagairt don eilimint óstabhála aici agus is féidir léi freagairt ar imeachtaí — anseo, soilsiú ar foluain. Úsáideach mar <p appHighlight>Text</p>.
<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
Is giorrúchán an * a fhilleann an eilimint i <ng-template> — agus sin an fáth gur féidir le directives struchtúrtha an eilimint a chur leis/a bhaint ar fad.
Is é an chaoi ar dhealraithíonn na directives don DOM go fóill i Angular.
Cumann na directives struchtúrtha (*ngIf/*ngFor/@if/@for) agus tréithe (ngClass/ngStyle/ngModel) ionsuite an chuid is mó de na riachtanais, agus ligeann directives dhúshlánaithe duit iompar DOM in-athúsáidte a dhúnmhaoiniú (soilsiú, tooltip, click-outside).
Tá tuiscint ar na trí chatagóir — agus gur directives iad na components féin le templates — lárnach do mhúnla template Angular.