[功能介紹-8] Pipes

Pipes有那些?

常用的Pipes有DatePipeUpperCasePipeLowerCasePipeCurrencyPipe,和PercentPipe。它們都可用於任何模板。

下面是angular內建所有的的Pipes說明:

如何使用Pipes

管道將數據作為輸入並將其轉換為所需的輸出。下面是使用DatePipe的範例。

在Pipes裡使用參數

請見下面的範例

這樣會顯示結果如下:
MM/dd/yy:04/15/88
shortDate:04/15/1988
fullDate:Friday, April 15, 1988

串接多個管道

下面為一個例子

結果會顯示
FRIDAY, APRIL 15, 1988

定義自己的Pipes

下面是一個自製Pipes的例子:

在上面的例子中可以看到

  • 會以@Pipe({name:’XXXX’})來宣告這個class是一個pipe
  • pipe類別需implements PipeTransform介面並依照要input的值來選擇要實作的transform方法
  • transform有一個可選參數exponent,可讓使用者帶要帶入的參數進Pipes
  • Pipe的名字需要是一個合法的Javascript命名

下面是一個使用範例

顯示的結果如下:

在每次被綁定的值更動時,都會再跑一次Pipes的功能,一般來說,Pipe只會偵測值的變化才會執行pure Pipes。如對象是String、Number、Boolean、Symbol、Date、Array」Function、Object。但如果裡面是一個物件,則pure Pipes會忽略他的更動。
這是因為效能的考量,若為純粹物件的值的更動在偵測上較快,但是在物件上屬性的更改的偵測效能會較差。會建議改使用元件的方式去偵測改變。

但angular還是提供了impure pipes的方式可以偵測物件的改變,但使用上要小心不能因此而拖慢系統速度。
它看起來會是像這樣:

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *