Pipes

Pipes transform the way data is displayed

基本概念

Pipes 是 Angular 提供的一種機制，用於轉換數據在模板中的顯示方式。它們可以：

轉換數據值的格式（如日期、貨幣、大小寫等）
過濾數據（如顯示陣列的一部分）
對數據進行排序或其他處理

簡單來說，Pipes 就像是數據的管道，原始數據進入，格式化後的數據輸出，而不會改變原始數據。

基本語法

Pipes 的基本語法是使用管道符號（|）：

{{ value | pipeName }}

如果需要傳入參數，可以使用冒號（:）：

{{ value | pipeName:parameter1:parameter2 }}

內建 Pipes

https://angular.dev/guide/templates/pipes

Angular 提供了許多內建的 Pipes，以下是一些常用的例子：

1. DatePipe

格式化日期：

<!-- 基本用法 -->
{{ dateValue | date }}  <!-- 輸出: 'Mar 4, 2025' -->

<!-- 自定義格式 -->
{{ dateValue | date:'short' }}  <!-- 輸出: '3/4/25, 12:00 PM' -->
{{ dateValue | date:'yyyy-MM-dd' }}  <!-- 輸出: '2025-03-04' -->

2. UpperCasePipe 和 LowerCasePipe

轉換文字大小寫：

{{ 'hello world' | uppercase }}  <!-- 輸出: 'HELLO WORLD' -->
{{ 'Hello World' | lowercase }}  <!-- 輸出: 'hello world' -->

3. CurrencyPipe

格式化貨幣值：

{{ 123.45 | currency }}  <!-- 輸出: '$123.45' -->
{{ 123.45 | currency:'TWD':'symbol':'1.0-0' }}  <!-- 輸出: 'NT$123' -->

4. DecimalPipe

格式化數字：

{{ 3.14159 | number:'1.2-2' }}  <!-- 輸出: '3.14' -->

5. JsonPipe

將物件轉換為 JSON 字串，常用於除錯：

{{ {name: 'John', age: 30} | json }}  <!-- 輸出: '{ "name": "John", "age": 30 }' -->

6. SlicePipe

截取陣列或字串的一部分：

{{ [1, 2, 3, 4, 5] | slice:1:3 }}  <!-- 輸出: [2, 3] -->
{{ 'Hello World' | slice:0:5 }}  <!-- 輸出: 'Hello' -->

7. AsyncPipe

處理非同步數據（Observable 或 Promise）：

{{ observableValue | async }}

鏈式 Pipes

Pipes 可以連接使用，形成處理管道：

{{ dateValue | date:'fullDate' | uppercase }}

上面的例子會先將日期格式化為完整日期形式，然後再將結果轉換為大寫。

自定義 Pipes

當內建 Pipes 無法滿足需求時，可以創建自定義 Pipes：

創建一個實現 PipeTransform 介面的類別
實現 transform 方法
這個 transform 方法將被 Angular 自動執行，並且你使用 Pipe 後的值將作為參數傳遞給這個 transform 方法。
可以像生命週期鉤子一樣在 class name 後面加上 implements PipeTransform 來避免拼寫錯誤或是沒有寫到
使用 @Pipe 裝飾器

範例：創建一個將文字截斷的 Pipe

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

@Pipe({
  name: 'truncate',
  standalone: true
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number = 25, trail: string = '...'): string {
    if (!value) {
      return '';
    }
    
    return value.length > limit 
      ? value.substring(0, limit) + trail 
      : value;
  }
}

使用方式：

<!-- 顯示前 25 個字元，後面加上 '...' -->
{{ longText | truncate }}

<!-- 顯示前 10 個字元，後面加上 '...' -->
{{ longText | truncate:10 }}

<!-- 顯示前 10 個字元，後面加上 '→' -->
{{ longText | truncate:10:'→' }}

純 Pipes 與非純 Pipes

Angular 中的 Pipes 預設是「純」的（pure），這意味著只有在輸入值發生引用變化時才會重新計算。

可以通過設置 pure: false 來創建非純 Pipes，這些 Pipes 會在每次變更檢測時都重新執行：

@Pipe({
  name: 'impurePipe',
  pure: false,
  standalone: true
})

非純 Pipes 在處理陣列或物件內部變化時很有用，但會影響性能，應謹慎使用。

實際應用場景

Pipes 在多種情況下非常有用：

格式化日期、數字、貨幣等顯示
本地化（i18n）
過濾列表或搜索結果
處理非同步數據
文字處理（截斷、轉換大小寫等）

PrevioushostDirectives NextService & DI

Last updated 6 months ago