Pipe 是Angular 實用的工具之一，可以將輸出畫面上的資料套上pipe工具及可格式化，減少重複撰寫轉換的邏輯。

目標：學習使用Angular Pipe

基本使用

參考文章

• 管道用來對字串、貨幣金額、日期和其他顯示資料進行轉換和格式化:

• Pipe 還有更多不同的使用方式：

更多pipe使用：https://angular.io/api?query=pipe

• 使用多個pipe時，pipe會一組一組的轉譯：

自定義Pipe

• 新增pipe並自訂義內容：

• 使套入的pipe即可：

進階定義Pipe

• 加入動態參數

：冒號輸入參數即可

Filter pipe

• 模擬輸入搜尋功能：

• Pipe 接上對應的欄位：

• 輸入匡輸出對應條件的結果：

非同步pipe

• 非同步pipe 使用 | async，可以偵測非同步Observable內容：

/** component.html **/
<div
   *ngIf="items$ | async as items">
    <span class="message">
      {{ items }}  // 使用的非同步內容
    </span>
 </div>

/** component.ts **/

// 命名後方有加入“＄”為Observable
items$ = new Observable<string>((observer: Observer<string>) => {
    setInterval(() => observer.next(new Date().toString()), 1000);
 });

結語

pipe 是簡單又方便格式統一的工具，只要套好Angular提供、或是自定義的pipe即可共用相同規格的輸出。