聊聊Angular中的指令（Directive）

本篇文章為大家介紹一下Angular中的指令（Directive）。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

環境:

• 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）。 【相關教學推薦：《

angular教學》】

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 元素上面使用多個結構性指令，可以考慮加一層空的元素來嵌套，例如在外面套一層空的（p) 。

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指令核心程式碼

#<pre class="brush:js;toolbar:false;">import { Directive, ElementRef } from &amp;#39;@angular/core&amp;#39;; @Directive({ selector: &amp;#39;[appHighlight]&amp;#39; }) export class HighlightDirective { constructor(el: ElementRef) { el.nativeElement.style.backgroundColor = &amp;#39;yellow&amp;#39;; } @HostListener(&amp;#39;mouseenter&amp;#39;) onMouseEnter() { this.highlight(&amp;#39;yellow&amp;#39;); } @HostListener(&amp;#39;mouseleave&amp;#39;) onMouseLeave() { this.highlight(null); } private highlight(color: string) { this.el.nativeElement.style.backgroundColor = color; } }</pre>

##4.4. 使用該指令

<p my-highlight>Highlight me!</p>

---

my-highlight

即我們的元素擴充屬性（指令、directive）。
5. 總結

• #指令（Directive）用於擴展DOM 元素或元件的功能。

Angular中的

*ngFor

、*ngIf 和

*ngSwitch### 都是Angular內建的指令。 ############更多程式相關知識，請造訪：###程式設計影片###！ ！ ###

以上是聊聊Angular中的指令（Directive）的詳細內容。更多資訊請關注PHP中文網其他相關文章！