管道就是將輸入的數據->通過某種轉換->輸出期望的值。
最常見的就是把服務端下發的時間戳轉化成前端需要的時間字符串。
比如服務器下發的時間是1507519139，
而我們需要展示的時間是2017/10/9 11:18:59，
或者2017-10-9 11:18:59類似這樣子的字符串，
就可以使用管道。
內置管道
Angular中提供了一部分常見的內置管道。
DatePipe時間管道
這個還是挺常用的，需要記下來的是。
年y 月M 日d 時H 分m 秒s
這裏是區分大小寫的。
比如我們需要的2017/10/9 11:18:59這樣的字符格式
就可以這樣定義timestamp|date:'yyyy/MM/dd HH:mm:ss'
DatePipe還提供了一些默認的參數，如'short'、'medium'、'long'等，我覺得記下來太麻煩了，我建議不管他，需要什麼格式，自己寫一下就好，保證不出錯。
I18nPluralPipe和I18nSelectPipe I18n複數管道和I18n選擇管道
這兩者的功能差不多，一個是比較，一個是選擇。
I18nPluralPipe 過濾的參數是一個數值，然後選擇根據條件轉化。
@Component({
selector: 'i18n-plural-pipe',
template: `<div>{{ messages.length | i18nPlural: messageMapping }}</div>`
})
export class I18nPluralPipeComponent {
messages: any[] = ['Message 1'];
messageMapping:
{[k: string]: string} = {'=0': 'No messages.', '=1': 'One message.', 'other': '# messages.'};
}
從上面的例子中可以看出messages.length | i18nPlural: messageMapping中的messages.length是一個數值。messageMapping定義了三個條件。
I18nSelectPipe 則是一個簡單的匹配。
@Component(
{selector: 'i18n-select-pipe', template: `<div>{{gender | i18nSelect: inviteMap}} </div>`})
export class I18nSelectPipeComponent {
gender: string = 'male';
inviteMap: any = {'male': 'Invite him.', 'female': 'Invite her.', 'other': 'Invite them.'};
}
gender | i18nSelect: inviteMap中的gender是一個字符串，inviteMap定義了一個過濾的數據。
這兩者都相同的是other爲保留字段，用於處理條件都不成立的情況。
JsonPipe Json管道
將Json對象轉化成Json字符串輸出。
DecimalPipe十進制管道
最常見的是保留小數點後面多少位。
price|number:'4.2-2'
後面的形如'4.2-2'這樣的a.b-c的結構。
a表示小數點之前最少顯示幾位。如2|number:'2'則會輸出’02’
b表示小數點之後最少顯示幾位。如2|number:'2.2'則輸出’02.20’
c表示小數點之後最多顯示幾位。如3.1415926|number:'2.2-3'則輸出’03.141’
CurrencyPipe貨幣管道
有用到的地方就是在貨幣前面加一個符號如要加一個’CN¥’或者’$’
currency:'RMB':'symbol-narrow':'4.2-2'
第二個參數，人民幣有兩個可選，’RMB’和’CNY’。
注意：CNY對應的符號是’CN¥’，如果只想在貨幣前面加’¥’,
可通過簡單的自定義管道實現，方法下一節課中講解。
第三個參數接受'symbol-narrow'顯示符號和'symbol'顯示字母。
可以直接用true和false代替，注意使用true和false時是boolean值，不帶引號。
第四個參數和十進制管道DecimalPipe的參數一樣。
PercentPipe百分比管道
將小數轉化成百分比，如0.2->20%
b | percent:'4.3-5'後面一個參數和十進制管道DecimalPipe的參數一樣。
LowerCasePipe和UpperCasePipe小寫管道和大寫管道
就是講字符串字母全變成小寫或者大寫
最後我們來看一個比較有趣的管道。
SlicePipe截取管道
和js操作數組中的slice方法類似。
比如數據太多，只想顯示前三項或者後三項，或者中間指定的某三項。
array_or_string_expression | slice:start[:end]
語法還蠻簡單的，指定開始和可選的結束。
有趣的是，這裏的角標支持負數。
@Component({
selector: 'slice-string-pipe',
template: `<div>
<p>'{{str | slice:0:4}}' - 截取0-4，最終輸出 'abcd'</p>
<p>'{{str | slice:4:0}}' - 最終輸出 ''</p>
<p>'{{str | slice:-4}}' - 從倒數第四開始截取，最終輸出 'ghij'</p>
<p>'{{str | slice:-4:-2}}' - 從倒數第四道倒數第二，最終輸出 'gh'</p>
<p>'{{str | slice:-100}}' - 從倒數100位開始，最終輸出 'abcdefghij'</p>
<p>'{{str | slice:100}}' - 從100位開始，最終輸出 ''</p>
</div>`
})
export class SlicePipeStringComponent {
str: string = 'abcdefghij';
}
這節課的內容就到這裏完成了。
感謝您的閱讀。
我是莽夫，希望你開心。
如果你覺得本文對你有幫助，請掃描文末二維碼，支持博主原創。
希望大家關注我的個人公衆號ionic_
