Angular 中的管道其實(shí)就是angularjs中的過(guò)濾器，用來(lái)轉(zhuǎn)換數(shù)據(jù)然后顯示給用戶(hù)。
要?jiǎng)?chuàng)建一個(gè)管道，必須實(shí)現(xiàn) PipeTransform 接口。這個(gè)接口非常簡(jiǎn)單，只需要實(shí)現(xiàn)transform方法即可。
使用管道的幾個(gè)注意事項(xiàng)：
- 管道可以鏈?zhǔn)绞褂?，還可以傳參
{{date | date: 'fullDate' | uppercase}} - 管道分兩種 純(pure)管道與非純(impure)管道
默認(rèn)是pure的。
Angular 只有在它檢測(cè)到輸入值發(fā)生了純變更時(shí)才會(huì)執(zhí)行純管道。 純變更是指對(duì)原始類(lèi)型值(String、Number、Boolean、Symbol)的更改， 或者對(duì)對(duì)象引用(Date、Array、Function、Object)的更改。
使用 impure 管道時(shí)候要小心，很可能觸發(fā)非常頻繁。
- 也是出于性能的考慮。Angular并沒(méi)有提供 angularjs 自帶的 Filter 和 OrderBy 過(guò)濾器，Angular官方推薦把過(guò)濾和排序放到組件中實(shí)現(xiàn)，比如對(duì)外提供
filteredHeroes或sortedHeroes屬性
Angular提供了json和async管道，我們來(lái)分析下源碼
源碼解析
json管道
/node_modules/@angular/common/esm5/src/pipes/json_pipe.js
非常簡(jiǎn)單，就一行話(huà)。
JsonPipe.prototype.transform = function (value) { return JSON.stringify(value, null, 2); };
async管道
這個(gè)是Angular特有的管道，可以多使用
其實(shí)會(huì)處理兩種對(duì)象類(lèi)型，Observable或Promise，簡(jiǎn)單說(shuō)如果是Observable會(huì)執(zhí)行subscription方法，如果是Promise會(huì)調(diào)用then方法。如果是Observable當(dāng)組件銷(xiāo)毀時(shí)執(zhí)行unsubscribe方法取消訂閱。
node_modules/@angular/common/esm5/src/pipes/async_pipe.js:11
