環境:
- Angular CLI: 11.0.6
- Angular: 11.0.7
- Node: 12.18.3
- npm : 6.14.6
- IDE: Visual Studio Code
1. 摘要
指令（Directive）在Angular 1.0時代（當時叫AngularJS）是很流行的，現在用到的偏少。可以簡單理解為，指令（Directive）用於擴展已有Element（DOM）。
2. 組件與指令之間的關系
如果去看Angular源碼，可以看到下面定義
/**
* Supplies configuration metadata for an Angular component.
*
* @publicApi
*/
export declare interface Component extends Directive {
是的，Component派生於Directive，也就是說，Component屬於Directive。
2.1. 指令的種類
- Component 是 Directive 的子接口，是一種特殊的指令，Component 可以帶有 HTML 模板，Directive 不能有模板。
- 屬性型指令：用來修改 DOM 元素的外觀和行為，但是不會改變DOM 結構，Angular 內置指令里面典型的屬性型指令有 ngClass、ngStyle，如果打算封裝自己的組件庫，屬性型指令是必備的內容。
- 結構型指令：可以修改 DOM 結構，內置的常用結構型指令有
*ngFor、*ngIf和*ngSwitch。由於結構型指令會修改 DOM 結構，因而同一個 HTML 標簽上面不能同時使用多個結構型指令。如果要在同一個 HTML 元素上面使用多個結構性指令，可以考慮加一層空的元素來嵌套，比如在外面套一層空的（div) 。
3. Angular 中指令的用途
Angualr中用指令來增強DOM的功能，包括 HTML 原生DOM和我們自己自定義的組件（Component）。舉例來說，可以擴展一個Button，實現避免點擊后，服務器端未響應前的二次點擊；高亮某些收入內容等等。
4. 指令舉例
4.1. 指令功能
實現一個指令，鼠標移動到上面時， 背景顯示為黃色，鼠標移開，恢復正常。
4.2. Anuglar CLI生成基本文件
ng generate directive MyHighlight
Anuglar CLI自動生成html、css、ut等文件。
4.3. Directive指令核心代碼
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
@HostListener('mouseenter') onMouseEnter() {
this.highlight('yellow');
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
4.4. 使用該指令
<p my-highlight>Highlight me!</p>
my-highlight即我們的元素擴展屬性（指令、directive）。
5. 總結
- 指令（Directive）用於擴展DOM 元素或組件的功能。
- Angular中的
*ngFor、*ngIf和*ngSwitch都是Angular內置的指令。
---------------- END ----------------
======================