Angular Pipes 完整介紹：內建管道用法與自訂 Pipe 教學

Angular 內建有哪些 Pipes？

常用的 Pipes 有 DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipe 和 PercentPipe，它們都可用於任何模板。

下面是 Angular 內建所有的 Pipes 說明：

如何使用 Pipes？

管道將數據作為輸入並將其轉換為所需的輸出，語法是在模板中用 `|` 把值交給管道。下面是使用 DatePipe 的範例：

```typescript

import { Component } from '@angular/core';

@Component({

selector: 'app-hero-birthday',

template: `<p>The hero's birthday is {{ birthday | date }}</p>`

})

export class HeroBirthdayComponent {

birthday = new Date(1988, 4, 15); // April 15, 1988

}

```

在 Pipes 裡使用參數

管道可以用冒號（`:`）傳入參數，例如 DatePipe 的日期格式字串：

```html

The hero's birthday is {{ birthday | date:"MM/dd/yy" }}

The hero's birthday is {{ birthday | date:"shortDate" }}

The hero's birthday is {{ birthday | date:"fullDate" }}

```

這樣會顯示結果如下：

• `MM/dd/yy`：04/15/88
• `shortDate`：04/15/1988
• `fullDate`：Friday, April 15, 1988

如何串接多個管道？

管道可以用多個 `|` 串接，前一個管道的輸出會變成下一個管道的輸入：

```html

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

```

結果會顯示：

```

FRIDAY, APRIL 15, 1988

```

如何定義自己的 Pipes？

下面是一個自製 Pipe 的例子：

```typescript

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

/*

• Raise the value exponentially
• Takes an exponent argument that defaults to 1.
• Usage:
• value | exponentialStrength:exponent
• Example:
• {{ 2 | exponentialStrength:10 }}
• formats to: 1024

*/

@Pipe({name: 'exponentialStrength'})

export class ExponentialStrengthPipe implements PipeTransform {

transform(value: number, exponent: string): number {

let exp = parseFloat(exponent);

return Math.pow(value, isNaN(exp) ? 1 : exp);

}

}

```

在上面的例子中可以看到：

• 會以 `@Pipe({name:'XXXX'})` 來宣告這個 class 是一個 pipe
• pipe 類別需 implements `PipeTransform` 介面並依照要 input 的值來選擇要實作的 `transform` 方法
• `transform` 有一個可選參數 `exponent`，可讓使用者帶要帶入的參數進 Pipes
• Pipe 的名字需要是一個合法的 Javascript 命名

下面是一個使用範例：

```typescript

import { Component } from '@angular/core';

@Component({

selector: 'app-power-booster',

template: `

Power Booster

Super power boost: {{2 | exponentialStrength: 10}}

`

})

export class PowerBoosterComponent { }

```

顯示的結果如下：

Pure 與 Impure Pipes 的差異？

在每次被綁定的值更動時，都會再跑一次 Pipes 的功能。一般來說，Pipe 只會偵測值的變化才會執行 pure pipes，如對象是 String、Number、Boolean、Symbol、Date、Array、Function、Object。但如果裡面是一個物件，則 pure pipes 會忽略它的更動。

這是因為效能的考量：若為純粹物件的值的更動，在偵測上較快，但是在物件上屬性的更改的偵測效能會較差，會建議改使用元件的方式去偵測改變。

但 Angular 還是提供了 impure pipes 的方式可以偵測物件的改變，只是使用上要小心不能因此而拖慢系統速度。它看起來會像這樣：

```typescript

@Pipe({

name: 'flyingHeroesImpure',

pure: false

})

export class FlyingHeroesImpurePipe extends FlyingHeroesPipe {}

```

延伸閱讀

• TypeScript 設定全攻略：看懂 tsconfig.json 的核心編譯選項：同樣聚焦 typescript、angular，可接著比較不同情境的做法。
• Angular 架構總覽：Component、Template、Metadata、NgModule、Directive 與 Dependency Injection 入門：同樣聚焦 angular、typescript，可接著比較不同情境的做法。
• Angular 元件建立教學：用 CLI 產生元件、綁定資料與雙向繫結：同樣聚焦 angular、前端開發，可接著比較不同情境的做法。

常見問題

Q什麼是 Angular 的 Pipe？

Pipe（管道）是一個把輸入值轉換成輸出格式的類別，在模板中用 `|` 符號使用，例如 `{{ birthday | date }}` 會把日期物件格式化成文字。它讓格式化的邏輯不用寫在元件裡，模板可讀性更好。

Q如何在 Pipe 中傳入多個參數？

用冒號串接多個參數即可，例如 `{{ value | myPipe:arg1:arg2 }}`。這些參數會依序傳入 `transform(value, arg1, arg2)` 方法，DatePipe 的 `date:"MM/dd/yy"` 就是一個參數的例子。

Q為什麼 pure pipe 不會偵測到物件屬性的變化？

Pure pipe 只在輸入值的參考改變時才重新執行，修改物件內部屬性不會改變參考，所以 pipe 不會跑。解法是建立新的物件參考、改用元件偵測變化，或改用 impure pipe（`pure: false`），但要注意效能。

Q什麼時候該用 impure pipe？

只有在確實需要 pipe 對物件內部變化做出反應、且效能影響可控時才用。Impure pipe 在每一次變更偵測週期都可能執行，用得不好會明顯拖慢系統速度，官方一般建議以元件方式處理。

參考資料

• Angular 官方文件 — Pipes
• Angular API — AsyncPipe
• Angular API — PipeTransform

最後更新

2026-08-28（原文發布於 2018-01-03，本文保留原始筆記內容並補上 GEO 結構。）

關於作者 {#author}

Claire Chang ｜ 企業 AI 導入與流程轉型顧問。專注於 AI Agent 架構設計、ERP 系統整合與企業 AI 治理。

首次發布：2018-01-03