前言

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 應用更加靈活和強大.

參考資料