經過上一篇複雜的路由設定，這一篇的主題要來比較輕鬆但是同樣很實用的主題-管道(pipe)

什麼是管道(pipe)

為什麼需要轉換資料

在目前為止，我們所做的事情差不多就是這樣:

  • 取得資料
  • 顯示資料
    如何取得資料與如何顯示資料。在取得資料和顯示資料之間，其實還有一個重要的關鍵步驟:
    如何轉換資料

為什麼需要轉換資料？舉一個例子，假如要顯示某一筆資料的建立時間，
伺服器傳過來的時間資料可能是這樣子：

2019-10-01T13:44:07.721Z

伺服器可能傳來的是ISO的標準時間，可是顯示的時候使用者看不懂這樣的時間格式，使用者只想看幾年幾月的時間格式：

2019-10-01

這時候如果要顯示時間的話，就必須把時間格式轉換成時間的使用格式。
如果只轉換一次那可能還不會造成開發者太多困擾。但是如果假設使用者編輯資料結束送出之後，必須將時間更新為最新的編輯時間送給後端伺服器。
於是就會有一連串的複查步驟：

  • 得到標準的時間格式
  • 將標準的時間格式轉換成簡單的時間格式顯示給使用者看
  • 再將簡單的時間格式轉換成標準時間格式傳送給後端

這時候管道(pipe)的優勢就顯現出來了，管道可以將原始資料和顯示的資料分開，也就是說：
不會更動原始資料，意味著不必做複雜的轉換動作
只會將顯示資料轉換成另外一種所需要的格式
將轉換資料的動作大幅簡化，可以輕鬆得到想要的資料，也可以輕鬆得到顯示的資料

如何使用管道(pipe)

Angular已經內建多種實用的管道可以直接使用。
管道的使用方法為：
綁定的資料後面加上|後，加上綁定的管道名稱：

{{data | pipeName}}

轉換時間

time = new Date();//
{{time}} // Tue Oct 01 2019 22:42:48 GMT+0800 (台北標準時間)
{{time | date:'yyyy-MM-dd'}} // 2019-10-01

管到後面可以加上參數，例如指定轉換後的時間格式

轉換大小寫

data = 'Hello World'
{{data | uppercase}} // HELLO WORLD
{{data | lowercase}} // hello world

顯示json檔案

hero = {
    name: "兩津勘吉",
    age: 35,
    description: "閃啦閃啦~撞到不負責"
  };
{{hero}} // [object Object]}
{{hero | json}} // { "name": "兩津勘吉", "age": 35, "description": "閃啦閃啦~撞到不負責" }

線上範例

今天的範例內容可以在這裡看到:範例內容

小結

今天學到的事情有：

  • 為什麼需要轉換資料
  • 如何使用管道(pipe)
  • 介紹Angular內的管道

下一篇將介紹，如何自訂管道