Angular4 開發(fā)實戰(zhàn)：(8) 創(chuàng)建管道(Pipe)
|)符號。
在模板中使用管道
在HTML中的模板綁定符號{{}}內(nèi)調(diào)用管道：
{{ name | uppercase }}
:)即可。如果有多個參數(shù)，可以在每個參數(shù)后面都加入冒號(比如slice:1:5)。
{{ today | date:"MM/dd/yy" }}
|符號隔開：
{{ today | date | uppercase}}
注：對純管道和非純管道的解釋，可參考文章最后的附錄。
下面會分別講解每一個管道的用法。
DatePipe
DatePipe用來格式化日期數(shù)據(jù)，使用方法如下：
{{ expression | date: format }}
expression可以是 ：
- Date日期對象
- 日期字符串，如”2016/04/05”
- 毫秒級時間戳
- format自定義日期格式如下表(取2016-06-08 20:05:08時間為例)
看例子：
// demo-pipe.component.html
{{ today | date }} // Jun 10, 2017
{{ today | date: 'y-MM-dd'}} // 2017-06-10
// demo-pipe.component.ts
this.today = new Date();
JsonPipe管道通過JSON.stringify()來將輸入數(shù)據(jù)對象轉(zhuǎn)換成對象字符串，該管道主要用于開發(fā)調(diào)試：
// demo-pipe.component.html
<pre>{{jsonObject | json}}</pre>
// demo-pipe.component.ts
jsonObject: Object = {firstname: 'bar', lastname: 'qux', address: {street: 'aaa', tel: [1, 2]}};
輸出結(jié)果為：
//json
{
"firstname": "bar",
"lastname": "qux",
"address": {
"street": "aaa",
"tel": [1, 2]
}
}
UpperCasePipe管道用于將文本中所有小寫字母轉(zhuǎn)換成大寫字母。
語法格式：
expression | uppercase
LowerCasePipe管道用于將文本中所有大寫字母轉(zhuǎn)換成小寫字母。
語法格式：
expression | lowercase
DecimalPipe管道用于對數(shù)值的整數(shù)與小數(shù)部分按照指定規(guī)則進行格式化，這種格式化方式也成為本地格式化處理，語法如下：
expression | number[:digitInfo]
digitInfo的格式如下：
{minIntegerDigits}.{minFractionDigits}-{maxfractionDigits}
minIntegerDigits：整數(shù)部分保留最小的位數(shù)，默認值為1.minFractionDigits：小數(shù)部分保留最小的位數(shù)，默認值為0.maxFractionDigits：小數(shù)部分保留最大的位數(shù)，默認值為3.
// demo-pipe.component.html
<p>A 變量：{{a | number: '3.4-5'}}</p>
<p>B 變量：{{b | number: '3.1-5'}}</p>
// demo-pipe.component.ts
a: number = 2.718281828459045;
b: number = 33456;
轉(zhuǎn)換后結(jié)果：
a 變量：002.71828
b 變量：33,456.0
CurrentPipe管道可以將數(shù)值進行貨幣格式化處理。語法如下：
expression | currency[: currencyCode[: symbolDisplay[: digitInfo]]]
currentcyCode：表示要格式化的目標貨幣格式，值為ISO 4217貨幣碼，如CNY人民幣、USD美元、EUR歐元等。symbolDisplay：表示以該類型貨幣的哪種格式顯示，值為布爾值，true表示顯示貨幣符號如￥、$等，false表示顯示ISO 4217貨幣碼如CNY、USD等。digitInfo：參考DecimalPipe管道。
// demo-pipe.component.html
<p>A 變量：{{ a | currency: 'USD': false }}</p>
<p>B 變量：{{ b | currency: 'CNY': true: '3.1-3'}}</p>
// demo-pipe.component.ts
a: number = 0.259;
b: number = 20.6745;
轉(zhuǎn)換后結(jié)果
A 變量：USD0.259
B 變量：￥020.675
PercentPipe管道可以對數(shù)值進行百分比處理。語法如下：
expression | percent[: digitInfo]
digitInfo：參考DecimalPipe管道
// demo-pipe.component.html
<p>A 變量：{{ a | percent }}</p>
<p>B 變量：{{ b | percent: '3.1-3' }}</p>
// demo-pipe.component.ts
a: number = 0.279;
b: number = 0.657;
輸出：
A 變量：27.9%
B 變量：065.7%
SlicePipe管道用于裁剪數(shù)組或字符串，返回裁剪后的目標子集。
語法如下：
expression | slice: start[: end]
SlicePipe是基于Array.prototype.slice()方法和String.prototype.slice()方法來實現(xiàn)的。
實例：
// demo-pipe.component.html
<p>{{ 'abcdef' | slice: 2 : 4}}</p>
<p>
<span *ngFor="let a of ([1, 'b', 3, 'c', 4] | slice: 2)">
{{a}}
</span>
</p>
- 使用
@Pipe裝飾器定義Pipe的 metadata 信息，如 Pipe 的名稱 - 即 name 屬性 - 實現(xiàn)
PipeTransform接口中定義的transform方法
sortPipe：
// app/pipes/sort.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'sort'
})
export class SortPipe implements PipeTransform {
transform(array: Array<any>, args?: string): Array<any> {
array.sort((a: any, b: any) => {
if (a < b) {
return -1;
} else if (a > b) {
return 1;
} else {
return 0;
}
});
return array;
}
}
@Pipe()裝飾器定義了一個名為“”的管道，類的transform方法是管道的關(guān)鍵，它可以接受任意的參數(shù)，第一個為過濾值，后面的參數(shù)都是可選的過濾參數(shù)。
注：這里只是為了明顯排序，其實可以直接使用array.sort()。
使用：
// demo-pipe.component.ts
arr: number[] = [80, 2, 5, 30];
// demo-pipe.component.html
<li *ngFor="let a of (arr | sort)">{{a}}</li>
更多建議：