Directive คือคลาสที่เพิ่มพฤติกรรมหรือแก้ไของค์ประกอบใน DOM แองกูลาร์มีสามประเภท: Component (Directive ที่มีเทมเพลต), Structural Directive (เปลี่ยนเลย์เอาต์ DOM), และ Attribute Directive (เปลี่ยนลักษณะ/พฤติกรรม).
พวกมันเพิ่มหรือลบองค์ประกอบ และมีคำนำหน้า :
*<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>
(แองกูลาร์สมัยใหม่ยังมีไวยากรณ์ control-flow ใหม่ @if / @for ที่แทนที่ *ngIf/*ngFor.)
พวกมันแก้ไของค์ประกอบที่มีอยู่โดยไม่เพิ่ม/ลบ:
<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 = "";
}
}
Directive ที่กำหนดเองได้รับการอ้างอิงถึงองค์ประกอบ host ของมัน และสามารถตอบสนองต่อเหตุการณ์ได้ — ที่นี่ ไฮไลท์เมื่อ hover ใช้เป็น <p appHighlight>Text</p>.
<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
* เป็นชวเลขที่ห่อองค์ประกอบในแม่แบบ <ng-template> — นั่นคือเหตุที่ Structural Directive สามารถเพิ่ม/ลบองค์ประกอบได้อย่างสมบูรณ์.
Directive คือวิธีที่แองกูลาร์จัดการ DOM แบบประกาศ.
Directive โครงสร้างที่สร้างไว้ (*ngIf/*ngFor/@if/@for) และ Attribute (ngClass/ngStyle/ngModel) ครอบคลุมความต้องการส่วนใหญ่ และ Directive ที่กำหนดเองช่วยให้คุณสามารถห่อหุ้มพฤติกรรม DOM ที่นำมาใช้ใหม่ได้ (ไฮไลท์ tooltip คลิก-ข้างนอก).
การทำความเข้าใจสามประเภท — และว่า Component นั้นเป็น Directive ที่มีเทมเพลตด้วยตัวของมันเอง — เป็นเ核心ของรูปแบบเทมเพลต Angular.