前言

Pipe 是 Angular 中用來轉換資料的方式，讓我們可以在 Template 中對資料進行格式化或轉換，並且可以在程式碼中重複利用。這篇文章將介紹內建 Pipe 和如何建立自訂 Pipe。

Pipe 用途

Angular 的 Pipe 是一種轉換資料的方式，它可以用在 Template 中對資料進行格式化或轉換等操作，並可以在程式碼中進行重複利用。

Pipe 可以分為兩種類型：

  • Angular 內建 Pipe：Angular 提供如 DatePipe、UpperCasePipe 等
  • 自訂 Pipe：開發者自行建立的 Pipe

內建 Pipe

只需要在模板中使用管道符號 | 來調用 Pipe 即可。以下是一些常用的內建 Pipe：

DatePipe

格式化日期。

<p>{{ today | date:'yyyy-MM-dd' }}</p>
<!-- 輸出：2023-03-17 -->

<p>{{ today | date:'fullDate' }}</p>
<!-- 輸出：Friday, March 17, 2023 -->

UpperCasePipe / LowerCasePipe

將文字轉為大寫或小寫。

<p>{{ name | uppercase }}</p>
<!-- 輸出：JOHN -->

<p>{{ name | lowercase }}</p>
<!-- 輸出：john -->

CurrencyPipe

格式化金額。

<p>{{ price | currency:'USD' }}</p>
<!-- 輸出：$1,234.56 -->

<p>{{ price | currency:'TWD':'symbol-narrow' }}</p>
<!-- 輸出：NT$1,234.56 -->

PercentPipe

格式化百分比。

<p>{{ rate | percent }}</p>
<!-- 輸出：75% -->

<p>{{ rate | percent:'1.2-2' }}</p>
<!-- 輸出：75.50% -->

DecimalPipe

格式化數字。

<p>{{ number | number:'1.2-2' }}</p>
<!-- 1.2-2 表示：至少 1 位整數，2-2 位小數 -->

AsyncPipe

處理非同步資料（Observable 或 Promise）。

<p>{{ data$ | async }}</p>

在 Component 中：

import { Observable } from 'rxjs';

export class AppComponent {
  data$: Observable<string>;
  
  constructor(private http: HttpClient) {
    this.data$ = this.http.get<string>('/api/data');
  }
}

自訂 Pipe

可以自行撰寫 Pipe，擴充 Angular 的 Pipe 功能。需要實作 PipeTransform Interface，該介面只有一個 transform 方法，負責處理資料轉換。

建立自訂 Pipe

使用 Angular CLI 建立：

ng generate pipe double

範例：建立一個將數字乘以 2 的 Pipe

import { Pipe, PipeTransform } from "@angular/core";

// Pipe 裝飾器
@Pipe({
  name: "double"
})
// 實作 PipeTransform Interface
export class DoublePipe implements PipeTransform {
  transform(value: number): number {
    return value * 2;
  }
}

使用方式：

<p>{{ 5 | double }}</p>
<!-- 輸出：10 -->

帶參數的 Pipe

Pipe 也可以接收參數。

範例：建立一個可以指定倍數的 Pipe

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "multiply"
})
export class MultiplyPipe implements PipeTransform {
  transform(value: number, multiplier: number = 1): number {
    return value * multiplier;
  }
}

使用方式：

<p>{{ 5 | multiply:3 }}</p>
<!-- 輸出：15 -->

<p>{{ 5 | multiply }}</p>
<!-- 輸出：5 (使用預設值 1) -->

實用範例：文字截斷 Pipe

建立一個截斷長文字的 Pipe：

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "truncate"
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number = 50, ellipsis: string = '...'): string {
    if (!value) return '';
    if (value.length <= limit) return value;
    return value.substring(0, limit) + ellipsis;
  }
}

使用方式：

<p>{{ longText | truncate:20 }}</p>
<!-- 只顯示前 20 個字元，後面加上 ... -->

鏈結多個 Pipe

可以將多個 Pipe 串連使用：

<p>{{ today | date:'fullDate' | uppercase }}</p>
<!-- 先格式化日期，再轉大寫 -->

<p>{{ price | currency:'USD' | lowercase }}</p>

Pure Pipe vs Impure Pipe

預設情況下，Pipe 是 Pure Pipe，只有在輸入值改變時才會重新執行。如果需要在每次變更檢測時都執行，可以設定為 Impure Pipe：

@Pipe({
  name: "myPipe",
  pure: false  // 設定為 Impure Pipe
})
export class MyPipe implements PipeTransform {
  transform(value: any): any {
    // 處理邏輯
  }
}

注意：Impure Pipe 會影響效能，應謹慎使用。

總結

Angular Pipe 是格式化和轉換資料的強大工具：

  • 內建 Pipe：提供常用的日期、數字、文字格式化功能
  • 自訂 Pipe：可以建立符合需求的資料轉換邏輯
  • 可串連使用：多個 Pipe 可以組合使用
  • 支援參數：Pipe 可以接收參數來客製化行為

善用 Pipe 可以讓 Template 更加簡潔，提高程式碼的可讀性和可維護性。

參考資料