Pipe 用途

Angular 的 Pipe 是一種 轉換資料 的方式,

它可以用在 Template 中對資料進行格式化或轉換等操作,

並可以在程式碼中進行重複利用

Pipe 可以分為兩種類型:

  • Angular 內建 Pipe, Angular 提供如 DatePipe 、 UpperCasePipe…

  • 自訂 Pipe

內建 Pipe

只需要在模板中使用管道符號 | 來調用 Pipe 即可

以下是一些常用的內建 Pipe:

  • DatePipe => 格式化日期, {{ date | date:'yyyy-MM-dd' }}

  • UpperCasePipe => 將文字轉為大寫, {{ name | uppercase }}

  • LowerCasePipe => 將文字轉為小寫, {{ name | lowercase }}

  • CurrencyPipe => 格式化金額, {{ price | currency:'USD' }}

  • PercentPipe => 格式化百分比, {{ rate | percent }}

  • AsyncPipe => 處理非同步資料, {{ data$ | async }}

自訂 Pipe

可以自行撰寫 Pipe,

擴充 Angular 的 Pipe 功能,

需要實作 PipeTransform Interface,

該介面只有一個 transform 方法, 負責處理資料轉換

以下是一個自訂的 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;
  }
}

上面的範例是一個名為 double 的 Pipe,

當我們在 Template 中使用 {{ number | double }},

該 Pipe 會將數字乘以 2 後再輸出

整理

參考