經過上一篇複雜的路由設定,這一篇的主題要來比較輕鬆但是同樣很實用的主題-管道(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內的管道

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