什么是管道

每個(gè)應(yīng)用開始的時(shí)候差不多都是一些簡(jiǎn)單任務(wù)：獲取數(shù)據(jù)、轉(zhuǎn)換它們，然后把它們顯示給用戶。
獲取數(shù)據(jù)可能簡(jiǎn)單到創(chuàng)建一個(gè)局部變量就行，也可能復(fù)雜到從WebSocket中獲取數(shù)據(jù)流。一旦取到數(shù)據(jù)，我們可以把它們?cè)贾档膖oString結(jié)果直接推入視圖中。 但這種做法很少能具備良好的用戶體驗(yàn)。 比如，幾乎每個(gè)人都更喜歡簡(jiǎn)單的日期格式，例如1988-04-15，而不是服務(wù)端傳過來(lái)的原始字符串格式 —— Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time)。顯然，有些值最好顯示成用戶友好的格式。我們很快就會(huì)發(fā)現(xiàn)，在很多不同的應(yīng)用中，都在重復(fù)做出某些相同的變換。 我們幾乎會(huì)把它們看做某種CSS樣式，事實(shí)上，我們也確實(shí)更喜歡在HTML模板中應(yīng)用它們 —— 就像CSS樣式一樣。通過引入Angular管道，我們可以把這種簡(jiǎn)單的“顯示-值”轉(zhuǎn)換器聲明在HTML中。
管道把數(shù)據(jù)作為輸入，然后轉(zhuǎn)換它，給出期望的輸出。
管道(Pipe)可以根據(jù)開發(fā)者的意愿將數(shù)據(jù)格式化。
下圖顯示的就是內(nèi)置DATE管道,輸入值birthday通過管道操作符( | )流到管道date中，根據(jù)管道參數(shù)來(lái)對(duì)流入的數(shù)據(jù)參數(shù)化。

管道的基本格式

如何使用管道

//管道使用語(yǔ)法
{{expression | pipe : arg}}
//如果是鏈?zhǔn)酱?lián):
{{expression | pipe1 : arg | pipe2 | pipe3 }}

管道參數(shù)化

管道可能接受任何數(shù)量的可選參數(shù)來(lái)對(duì)它的輸出進(jìn)行微調(diào)。 我們可以在管道名后面添加一個(gè)冒號(hào)( : )再跟一個(gè)參數(shù)值，來(lái)為管道添加參數(shù)(比如currency:'EUR')。 如果我們的管道可以接受多個(gè)參數(shù)，那么就用冒號(hào)來(lái)分隔這些參數(shù)值(比如slice:1:5)。
可以理解對(duì)管道進(jìn)行參數(shù)化的意思是：傳入某些參數(shù)，對(duì)轉(zhuǎn)換結(jié)果進(jìn)行限制性的格式化轉(zhuǎn)換。
即：
{{ birthday | date }}若不傳參數(shù)，則為默認(rèn)值，即輸出：Dec 26, 2017
{{ birthday | date:"MM/dd/yy" }}傳入了參數(shù)，對(duì)轉(zhuǎn)換結(jié)果的格式進(jìn)行了限制，輸出：12/26/2017
當(dāng)然這些參數(shù)化的參數(shù)是管道中已經(jīng)定義好的了，而不是可以隨便傳入的，管道會(huì)根據(jù)傳入的參數(shù)匹配管道中定義好的參數(shù)，匹配之后再根據(jù)定義好的規(guī)則進(jìn)行不同的格式化轉(zhuǎn)換

鏈?zhǔn)焦艿?/h6>

//我們可以把管道鏈在一起，以組合出一些潛在的有用功能。 
{{myDataDate | date:"fullDate"}}：Tuesday, December 26, 2017
{{myDataDate | date:"fullDate" | uppercase}}：TUESDAY, DECEMBER 26, 2017

常用的內(nèi)置管道

管道                 類型                    功能
DatePipe            純管道                 日期格式化
JsonPipe            非純管道               使用JSON.stringify()將對(duì)象轉(zhuǎn)成json字符串
UpperCasePipe       純管道                 將文本中的字母全部轉(zhuǎn)在大寫
LowerCasePipe       純管道                 將文本中的字母全部轉(zhuǎn)成小寫
TitleCasePipe                             將文本轉(zhuǎn)換成標(biāo)題格式
DecimalPipe         純管道                 數(shù)值格式化
CurrencyPipe        純管道                 貨幣格式化
PercentPipe         純管道                 百分比格式化
SlicePipe           非純管道               數(shù)組或字符串取切割
I18nPluralPipe                            根據(jù)expression的值匹配mapping中的值，并將匹配之后的值展示出來(lái)
I18nSelectPipe                            根據(jù)expression匹配mapping中的值，并且返回匹配之后的值

angular管道的變化監(jiān)測(cè)

Angular通過變更檢測(cè)過程來(lái)查找綁定值的更改，并在每一次JavaScript事件之后運(yùn)行：每次按鍵、鼠標(biāo)移動(dòng)、定時(shí)器以及服務(wù)器的響應(yīng)。 這可能會(huì)讓變更檢測(cè)顯得很昂貴，但是Angular會(huì)盡可能降低變更檢測(cè)的成本。
每一次的變更檢測(cè)如果都引起管道的運(yùn)行，那么是否就會(huì)造成程序任務(wù)的繁重，換句話說，如果每一次的鼠標(biāo)移動(dòng)，每一次的鍵盤按下都調(diào)用了這個(gè)管道實(shí)踐，就會(huì)使得整個(gè)程序的繁忙。
更多情況下，我們不知道什么時(shí)候數(shù)據(jù)變化了，尤其是在那些有很多種途徑改動(dòng)數(shù)據(jù)的程序中 —— 可能在程序中很遠(yuǎn)的地方。 組件就是一個(gè)通常無(wú)法知道那些改動(dòng)的例子。此外，它會(huì)導(dǎo)致削足適履 —— 扭曲我們的組件設(shè)計(jì)來(lái)適應(yīng)管道。 我們要盡可能保持組件類獨(dú)立于HTML。組件不應(yīng)該關(guān)心管道的存在。
Angular管道有兩種變化監(jiān)測(cè)機(jī)制，一種是純管道（默認(rèn)），另一種即非純管道。
有兩類管道：純的與非純的。 默認(rèn)情況下，管道都是純的。我們以前見到的每個(gè)管道都是純的。 通過把它的pure標(biāo)志設(shè)置為false，我們可以制作一個(gè)非純管道。

純變更和非純變更實(shí)例對(duì)比

下面的管道過濾只顯示”李”姓的聯(lián)系人，如果用戶輸入一個(gè)”李”姓聯(lián)系人，然后回車將該聯(lián)系人添加至contacts數(shù)組中。然后我們會(huì)覺得聯(lián)系人列表應(yīng)該會(huì)實(shí)時(shí)顯示新的聯(lián)系人，然而并沒有。
這是因?yàn)锳ngular優(yōu)化了管道的監(jiān)測(cè)機(jī)制，它會(huì)忽略對(duì)象內(nèi)值的變化，只會(huì)監(jiān)測(cè)指向?qū)ο蟮闹羔樖欠癜l(fā)生改變。
這種管道稱為純管道，雖然純管道優(yōu)化了性能，但有時(shí)無(wú)法滿足需求，就像下面的例子那樣。這時(shí)我們就需要另外一種變化監(jiān)測(cè)機(jī)制，也就是非純管道。我們可以通過將pure設(shè)置為false，這樣每當(dāng)我們輸入一個(gè)李姓名字的時(shí)候就可以在成功添加顯示這個(gè)李姓名字。

/*
 select-contactPipe.pipe.ts
 步驟 ：
 1、導(dǎo)入Pipe，PipeTransform
 2、通過注解定義名字，定義是純管道還是非純管道，默認(rèn)是純管道
 3、定義管道并繼承PipeTransform
 4、實(shí)現(xiàn)繼承的方法transform
 */
import { Pipe, PipeTransform } from '@angular/core';
/*
 * from:http://blog.csdn.net/qq451354/article/details/58588252?locationNum=15&fps=1
 * Usage:
 *   value | selectContactPipe:exponent
 * Example:
 *   contacts = [{name: '張三'}, {name: '李四'}];
 *   {{ contacts | selectContactPipe: '李' }}
 *   output:李四
 */
@Pipe({
  name: 'selectContactPipe',
  //pure: false
})
export class SelectContanctPipe implements PipeTransform {
  transform(allContacts: Array<string>, prefix: string) {
    return allContacts.filter(contact => contact.name.match(prefix));
  }
}

<input type="text" #box (keyup.enter)="addContact(box.value); box.value=''" placeholder="輸入聯(lián)系人后回車添加" />
<div *ngFor="let contact of (contacts | selectContactPipe: '李')">
  {{contact.name}}
</div>

contacts = [{name: '張三'}, {name: '李四'}];
addContact(name: string) {
    this.contacts.push({name});
}

純管道(Pure Pipe)

使用純管道時(shí)，只有監(jiān)測(cè)到輸入值發(fā)生純變更才會(huì)調(diào)用純管道的transform方法來(lái)轉(zhuǎn)換數(shù)據(jù)。
純變更是指對(duì)基本數(shù)據(jù)類型輸入值的變更，或?qū)?duì)象的引用放生改變。

非純管道(Impure Pipe)

使用非純管道，Angular組件在每個(gè)變化監(jiān)測(cè)周期都會(huì)調(diào)用非純管道。每個(gè)變化周期指的是每次的點(diǎn)擊，回車等事件發(fā)生就會(huì)調(diào)動(dòng)檢測(cè)機(jī)制從而監(jiān)測(cè)數(shù)據(jù)是否發(fā)生變化，并且這樣的檢測(cè)不僅僅可以檢測(cè)出純變更，同樣能監(jiān)測(cè)出非純變更，即對(duì)象的地址不變，但內(nèi)容變化了同樣可以檢測(cè)出來(lái)。

//設(shè)置非純管道
@Pipe({ 
    name: 'selectContact',
    pure: false    //設(shè)置非純管道
})

參考網(wǎng)址

管道的相關(guān)知識(shí)
http://blog.csdn.net/qq451354/article/details/58588252?locationNum=15&fps=1
https://www.pocketdigi.com/20170209/1563.html
https://segmentfault.com/a/1190000008262691