透過Pipe，可以不用在Component端寫程式改變資料的顯示模式，而是透過 Pipe 的模式來調整要顯示的資料內容，如此一來我們就不用在 Component中花太多心思去關注內容該如何呈現，再次達到關注點分離的效果

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';
}

客製通道

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

@Pipe({
  name: 'exponential'
})
export class ExponentialPipe implements PipeTransform {

  transform(value: number, exponent: string): number {
    let exp = parseFloat(exponent);
    return Math.pow(value, isNaN(exp) ? 1 : exp);
  }
}

• transform function 所回傳的值，會用來顯示在畫面上
• 第一個參數 value 是所要轉換的資料來源
• 第二個之後的參數可以用來接 Template 傳給 pipe 的參數值

參考

1. [Angular2速成班]使用Pipe輕鬆改變view上的顯示內容(1)-Angular2內建Pipe
2. [Angular] Pipe
3. [Day 07] Angular 2 PIPES(通道)