前言

每一個應用程式都是一些非常簡單的任務開始：獲取數據、轉換數據，並把它們顯示給用戶。

我們有想要呈現的數據，但可能樣子很醜，造成用戶體驗很差，或著不是我們要的格式。比方說幾乎顯示日期 (2016-12-22) 而非原始字符串格式 (Thu Dec 22 2016 20:00:00 GMT+0800)。或著有時候想要把所有小寫字母，在顯示的時候變成都是大寫。

將小寫變成大寫：

// app.component.ts

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


@Component({

selector: 'my-app',

// uppercase 為 Angular 內建

template: '<p>My name is <strong>{{ name | uppercase }}</strong>.</p>',

})

export class AppComponent {

name = 'john doe';

}

輸出結果會是 My name is JOHN DOE.

我們發現，應用程序中重複著上述相同的轉換非常多。解決方式可以用 TS 把數據做好轉換，再來呈現。也可以將這些轉換直接在 HTML 模板裡轉換。後者過程叫做管道(pipe)。

客製化通道

現在我們要做一個把每個單字第一個字母變成大寫的通道：
先定義我們的 Pipe

// capitalize.pipe.ts

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


@Pipe({name: 'capitalize'})

export class CapitalizePipe implements PipeTransform {

transform(value: string, args: string[]): any {

if (!value) return value;


return value.replace(/\w\S*/g, function(txt) {
    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});



}

}

接著使用我們的 Pipe

// app.component.ts

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


@Component({

selector: 'my-app',

template: '<p>My name is <strong>{{ name | capitalize }}</strong>.</p>'

// 用 capitalize 這個 pipe 來做轉換

})

export class AppComponent {

name = 'john doe';

}

輸出結果會是 My name is John Doe.

App 通用的 Pipe

有些 Pipe 我們可能會一直用到，例如日期轉換、語言翻譯，這些可能在很多個 Components 中都有用到，我們能做到讓自己定義的 Pipe 就像一些內建的 Pipe 在每個 Component 中都可以使用。

一種方法是我們在 App Module 中引入我們寫好的 Pipe

// app.module.ts

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

import { BrowserModule } from '@angular/platform-browser';


import { AppComponent }   from './app.component';

import { CapitalizePipe } from './capitalize.pipe'; // 導入我們的 pipe


@NgModule({

imports:      [ BrowserModule ],

// 引入 capitalize pipe

declarations: [ AppComponent, CapitalizePipe ],

bootstrap:    [ AppComponent ]

})


export class AppModule { }

這樣之後要用 Pipe 就不用每個 Component 都一一宣告囉！
Plurk 範例