Directive 用途

Angular Directive 是用來擴充 HTML 的元素 、 屬性 、 class 、 樣式,

可以透過 Directive 自定義 HTML 元素的行為 & 樣式

Angular 有三種 Directive:

  • Component Directive, 用來構建可重複使用的 Component

  • Attribute Directive, 用來更改元素的外觀 & 行為

  • Structural Directive, 用來改變 HTML 的 布局 、 結構

Component Directive

可以把 Component Directive 當作是一個帶有 模板 的指令,

用來構建 可重複使用的 & 有模板的元件,

它可以與其它 Directive 、 元素 、 屬性一起使用

Attribute Directive

Attribute Directive 可以修改 HTML 元素的 外觀 & 行為,

在 Angular 中,

有提供內建的 Attribute Directive:

  • ngClass

  • ngStyle

Structural Directive

Structural Directive 可以改變 HTML 的布局 & 結構,

可以用來 添加 、 刪除 、 替換 DOM 元素,

從而改變 DOM 結構本身

Angular 提供了三種內置 Structural Directive:

  • *ngIf => 用於判斷之後, 顯示或隱藏一個元素

  • *ngFor => 用於對集合進行迴圈

  • [ngSwitch] => 用於根據表達式的值, 顯示或隱藏多個元素之一

整理

參考