[Angular 速成班]使用Pipe輕鬆改變view上的顯示內容(1)-Angular內建Pipe

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

為何要使用Pipe

很多時候,我們用程式產生或從後端API撈取的資料未必就是我們希望呈現在畫面上的內容,這時候我們就必須自行撰寫程式來將資料轉換成要呈現的內容,然而這樣的程式碼不管在Component(負責前後端的串接)還是在Service(負責後端串接、商業邏輯)中,都會顯得有點格格不入,因此Angular提供了Pipe的功能,讓我們能將轉換資料呈現方式的程式碼寫在Pipe中,接著就可以在View中直接使用,這麼做個人認為有幾個主要好處:

  1. 關注點分離:已經被提到太多次的重要概念,各個類別各司其職,需要的時候再組合起來,達成高內聚,低耦合的效果,維護程式也更加容易。
  2. 易於測試:由於Pipe的目標很簡單,就是一個類別,把input的資料轉為想要output的內容,與其他外部組件的相依性極低,因此非常適合撰寫isolated unit test來獨立測試,測試案例也不會跟Component或Service裡面的其他程式混在一起。
  3. 可重複使用:Pipe在設計完成後就可以直接在View中使用,因此只要Pipe完成後,我們可以在任何地方直接套用這個Pipe,不限任何Component,重複使用性高。

如何使用Pipe

Pipe寫好後需要在View中直接使用,程式看起來大致會如下

{{ data | mypipe }}

以上的意思是,把data透過mypipe這個Pipe進行轉換

為Pipe加上參數

有些Pipe可以在後面加上一些參數,來調整要轉換的方式,如果需要加入參數,可以在Pipe後面加上:參數,多個參數也可以使用:參數1:參數2的方式;如下:

{{ data | mypipe:para1:para2 }}

使用Angular內建的Pipe

今天我們先來介紹兩個Angular已經內建好的Pipe,DatePipe和JsonPipe;關於完整Angular中內建可用的Pipe,可以參考官方文件

https://angular.io/docs/ts/latest/api/#!?query=pipe

DatePipe

DatePipe用於進行對日期資料的轉換,例如我們直接產生JavaScript的Date物件,如下:

export class AppComponent {
  today = new Date();
}

此時若將today直接呈現在畫面上時,看起來會是這樣:

直接顯是一大串日期文字的狀況並不常見,這時候我們可以加上DatePipe,程式碼如下:

{{ today | date }}

執行結果

DatePipe也可以接受一個時間格式的字串如(y-MM-dd),並內建了幾種常見的顯示模式,如shortDateshortTime等等

JsonPipe

JsonPipe對於我們在前端想要debug物件的資料時很有幫助,雖然大多時間我們都會選擇使用console.log()來顯示資料,但在View上我們可以透過JsonPipe把資料物件直接顯示出來

例如我們有個bio物件

export class AppComponent {
  bio = {
    name: 'wellwind',
    age: 30,
    sex: 'M'
  };
}

要在View上直接顯示這個物件完整資訊,只需要透過JsonPipe

{{ bio | json }}

執行結果

JsonPipe其實就是使用JSON.stringify對資料轉換,非常簡單,很適合拿來進行除錯。

單元回顧

今天我們介紹了Angular的Pipe功能,並簡單說明了使用Pipe的好處,讓我們能寫出更好維護的程式,同時簡單介紹了兩個Angular內建的Pipe;下次我們將會介紹如何撰寫自己的Pipe,讓資料呈現無死角!

今天的程式碼:

https://github.com/wellwind/AngularDotblogsDemo/tree/AngularPipe

如果您覺得我的文章有幫助,歡迎免費成為 LikeCoin 會員,幫我的文章拍手 5 次表示支持!
[Angular 速成班]使用NgFor的5個特別變數,讓資料更有變化
[Angular 速成班]使用Pipe輕鬆改變view上的顯示內容(2)-自訂Pipe讓內容顯示無死角
按照日期
[Angular 速成班]開發Ajax程式不可或缺的重要關鍵—Http Module
[Angular 速成班]使用Pipe輕鬆改變view上的顯示內容(2)-自訂Pipe讓內容顯示無死角

有任何問題或建議嗎?歡迎留言給我