指令是向 DOM 中的元素添加行为或修改元素的类。Angular 有三种类型：组件（带模板的指令）、结构型指令（改变 DOM 布局）和属性型指令（改变外观/行为）。
结构型指令 — 改变 DOM 结构
它们添加或删除元素，并使用 * 前缀：
html
Welcome back!
{{ i }}: {{ item.name }}
Active
Unknown
（现代 Angular 还提供了较新的 @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 = "";
}
}
自定义指令获取对其宿主元素的引用，并可以响应事件 — 这里在悬停时突出显示。用法为 <p appHighlight>Text</p>。
<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
* 是简写形式，将元素包装在 <ng-template> 中 — 这就是为什么结构型指令可以完全添加/删除元素。
指令是 Angular 以声明方式操纵 DOM 的方式。
内置的结构型指令（*ngIf/*ngFor/@if/@for）和属性型指令（ngClass/ngStyle/ngModel）满足大多数需求，自定义指令让您可以封装可复用的 DOM 行为（高亮、工具提示、点击外部）。
理解三个类别 — 以及组件本身就是带模板的指令 — 是 Angular 模板模型的核心。