Angular pipe(管道)介紹及使用

Angular 中的管道其實就是angularjs中的過濾器，用來轉換數據而後顯示給用戶。 要建立一個管道，必須實現 PipeTransform 接口。這個接口很是簡單，只須要實現transform方法便可。 使用管道的幾個注意事項：

1. 管道能夠鏈式使用，還能夠傳參 {{date | date: 'fullDate' | uppercase}}
2. 管道分兩種 純(pure)管道與非純(impure)管道 默認是pure的。 Angular 只有在它檢測到輸入值發生了純變動時纔會執行純管道。 純變動是指對原始類型值(String、Number、Boolean、Symbol)的更改， 或者對對象引用(Date、Array、Function、Object)的更改。

使用 impure 管道時候要當心，極可能觸發很是頻繁。

3. 也是出於性能的考慮。Angular並無提供 angularjs 自帶的 Filter 和 OrderBy 過濾器，Angular官方推薦把過濾和排序放到組件中實現，好比對外提供filteredHeroes 或 sortedHeroes 屬性

Angular提供了json和async管道，咱們來分析下源碼

源碼解析

json管道

/node_modules/@angular/common/esm5/src/pipes/json_pipe.js 很是簡單，就一行話。 JsonPipe.prototype.transform = function (value) { return JSON.stringify(value, null, 2); };

async管道

這個是Angular特有的管道，能夠多使用 其實會處理兩種對象類型，Observable或Promise，簡單說若是是Observable會執行subscription方法，若是是Promise會調用then方法。若是是Observable當組件銷燬時執行unsubscribe方法取消訂閱。 node_modules/@angular/common/esm5/src/pipes/async_pipe.js:11

參考

segmentfault.com/a/119000000…