前言

Directive（指令）是 Angular 中用來擴充 HTML 元素的強大功能。這篇文章將介紹三種 Directive 類型以及它們的用途。

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

用於動態添加或移除 CSS class。

<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">
  Content
</div>

在 Component 中：

export class AppComponent {
  isActive: boolean = true;
  isDisabled: boolean = false;
}

ngStyle

用於動態設定元素的 inline style。

<div [ngStyle]="{'color': textColor, 'font-size': fontSize + 'px'}">
  Styled text
</div>

在 Component 中：

export class AppComponent {
  textColor: string = "blue";
  fontSize: number = 16;
}

Structural Directive

Structural Directive 可以改變 HTML 的布局和結構，可以用來添加、刪除、替換 DOM 元素，從而改變 DOM 結構本身。

Angular 提供了三種內置 Structural Directive：

*ngIf

用於根據條件顯示或隱藏元素。

<div *ngIf="isLoggedIn">
  Welcome back!
</div>

<div *ngIf="isLoggedIn; else loginTemplate">
  Welcome back!
</div>
<ng-template #loginTemplate>
  <div>Please login</div>
</ng-template>

*ngFor

用於對集合進行迴圈，重複渲染元素。

<ul>
  <li *ngFor="let item of items; let i = index">
    {{ i + 1 }}. {{ item.name }}
  </li>
</ul>

在 Component 中：

export class AppComponent {
  items = [
    { name: "Item 1" },
    { name: "Item 2" },
    { name: "Item 3" }
  ];
}

[ngSwitch]

用於根據表達式的值，顯示或隱藏多個元素之一。

<div [ngSwitch]="userRole">
  <div *ngSwitchCase="'admin'">Admin Dashboard</div>
  <div *ngSwitchCase="'user'">User Dashboard</div>
  <div *ngSwitchDefault>Guest Dashboard</div>
</div>

自訂 Directive

除了內建的 Directive，我們也可以建立自訂的 Directive。

使用 Angular CLI 建立 Directive：

ng generate directive highlight

範例：建立一個改變背景顏色的 Directive

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.el.nativeElement.style.backgroundColor = 'yellow';
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.el.nativeElement.style.backgroundColor = '';
  }
}

使用方式：

<p appHighlight>Hover over me!</p>

總結

Angular Directive 是擴充 HTML 功能的強大工具：

  • Component Directive：帶有模板的可重複使用元件
  • Attribute Directive：修改元素外觀和行為（ngClass、ngStyle）
  • Structural Directive：改變 DOM 結構（*ngIf、*ngFor、[ngSwitch]）

掌握這些 Directive 的使用，可以讓你的 Angular 應用更加靈活和強大。

參考資料