1. 說明 管道用來轉換模板顯示的內容，應用程式中經常出現獲取數據，轉換數據，顯示數據的邏輯。管道就是用來在轉換數據階段起作用的。主要存在兩種類型的管道，pure pipe和impure pipe 2. Pure Pipe Pure Pipe，stateless，關註於純粹對象的變更，檢測到輸入值發 ...
1. 說明
管道用來轉換模板顯示的內容，應用程式中經常出現獲取數據，轉換數據，顯示數據的邏輯。管道就是用來在轉換數據階段起作用的。主要存在兩種類型的管道，pure pipe和impure pipe
2. Pure Pipe
Pure Pipe，stateless，關註於純粹對象的變更，檢測到輸入值發生了 純變更 時才會執行 純管道 。 純變更 是指對原始類型值 (String 、Number 、 Boolean 、 Symbol) 的更改， 或者對對象引用 (Date 、 Array 、 Function 、 Object) 的更改。針對複雜對象內部元素的變更不會影響到純粹管道的執行。常見的內置管道
|
名稱 |
用法 |
說明 |
|
CurrencyPipe |
expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]] |
將數據轉化為指定格式的金額格式輸出 |
|
DatePipe |
expression | date[:format] |
將時間數據轉換為指定格式的字元串 |
|
DecimalPipe |
expression | number[:digitInfo] |
將數據轉化為指定格式的數據格式輸出 |
|
LowerCasePipe |
expression | lowercase |
將數據轉化為小寫輸出 |
|
UpperCasePipe |
expression | uppercase |
將數據轉化為大寫輸出 |
|
JsonPipe |
expression | json |
將數據轉化為json格式輸出 |
|
SlicePipe |
expression | slice:start[:end] |
獲取指定位置從start到end的數據 |
3. Impure Pipe
Impure Pipe，stateful，Angular 會在每個組件的變更檢測周期中執行 非純管道 。 非純管道可能會被調用很多次，和每個按鍵或每次滑鼠移動一樣頻繁。常見的內置非純管道有
|
名稱 |
用法 |
說明 |
|
AsyncPipe |
object | async |
接受一個 Promise 或 Observable 作為輸入，並且自動訂閱這個輸入，最終返回它們給出的值 |
4. 如何使用
管道把數據作為輸入，然後轉換它，給出期望的輸出。管道使用包括三個方面：
(1). 表達式語法的寫法
(2). 如何參數設置
(3). 多個管道如何同時使用
從下麵的例子可以很方便的看出來以上三個方面如何編寫，
|
import { Component } from '@angular/core';
@Component({ moduleId: 'app', selector: 'app', template: ` <h5>your birthday is {{birthday | date:'MM/dd/yy' | uppercase}}</h5> `, }) export class AppComponent { birthday: Date = new Date(2012, 10, 10); } |
表達式的寫法：在插值表達式中數據的右側通過 管道操作符 ( | ) 及 右側的管道函數 來表示
如何設置參數：在管道函數的後面添加一個冒號 ( : ) 再跟一個參數值，來為管道添加參數
多個管道同時使用：在插值表達式數據後面可以同時採用多個管道操作符 ( | ) 及 右側的管道函數來表示多個管道，執行順位為從左到右依次執行。
5. 自定義管道
我們來編寫一個自定義管道，管道的含義是截取指定長度的字元串。
5.1 模塊
首先我們引入對應的模塊及函數Pipe
|
import { Pipe, PipeTransform } from '@angular/core'; |
5.2 註解
從@angular/core中導入Pipe及PipeTransform函數後，可以使用@ Pipe ()來標示組件類為一個Pipe，@標示註解的一種標識，用來普通類附加對應的元數據信息。
5.3 元數據
@Pipe將元數據的信息附加到類上，我們來瞭解一下常用的元數據信息都有哪些：
|
@Directive({ name: 'sub', pure: false }) |
name：管道的名稱，表示在使用管道所採用的名稱，例如 date等，
pure：布爾值，純管道或者非純管道
5.4 管道類
管道類包含實現數據轉化的主要邏輯，管道類必須實現PipeTransform的transform的方法，在數據轉化過程中會自動調用這個方法，並將結果返回。我們實現截取的管道類代碼如下
|
export class SubPipe implements PipeTransform { transform(value: string, length: number): string { return value.substring(0, length); } } |
最後實現的代碼如下：
|
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'sub', pure: false }) export class SubPipe implements PipeTransform { transform(value: string, length: number): string { return value.substring(0, length); } } |
