1.什么是Pipe?
就是管道，简单来说，管道的作用就是传输。并且不同的管道具有不同的作用。(其实就是处理数据)
2.pipe用法
| 序号 |
管道 |
功能 |
用法 |
说明 |
| 1 |
DatePipe |
日期管道，格式化日期 |
|
|
| 1.1 |
|
|
{{ dateTime | date:'yyyy-MM-dd HH:mm:ss'}} |
// 1989-07-22 10:21:21 |
| 1.2 |
|
|
{{ dateTime | date:'medium' }} |
// 1989年7月22日 上午10:21:21 |
| 1.3 |
|
|
{{ dateTime | date:'short' }} |
// 1989/7/22 上午10:21 |
| 1.4 |
|
|
{{ dateTime | date:'fullDate' }} |
// 1989年7月22日星期六 |
| 1.5 |
|
|
{{ dateTime | date:'longDate' }} |
// 1989年7月22日 |
| 1.6 |
|
|
{{ dateTime | date:'mediumDate' }} |
// 1989年7月22日 |
| 1.7 |
|
|
{{ dateTime | date:'shortDate' }} |
// 1989/7/22 |
| 1.8 |
|
|
{{ dateTime | date:'mediumTime' }} |
// 上午10:21:21 |
| 1.9 |
|
|
{{ dateTime | date:'shortTime' }} |
// 上午10:21 |
| 2 |
JsonPipe |
将输入数据对象经过JSON.stringify()方法转换后输出对象的字符串 |
|
|
| 3 |
UpperCasePipe |
将文本所有小写字母转换成大写字母 |
|
|
| 4 |
LowerCasePipe |
将文本所有大写字母转换成小写字母 |
|
|
| 5 |
DecimalPipe |
将数值按照特定的格式显示文本 |
|
|
| 5.1 |
|
|
参考2.1 |
|
| 6 |
CurrentcyPipe |
将数值进行货币格式化处理 |
|
|
| 6.1 |
|
|
参考2.2 |
|
| 7 |
SlicePipe |
将数组或者字符串裁剪成新子集 |
|
|
| 8 |
PercentPipe |
将数值转百分比格式 |
|
|
2.1 DecimalPipe用法
将数字转换为百分比字符串，并根据确定组大小和分隔符，小数点字符以及其他特定于语言环境的配置的语言环境规则进行格式化。
用法：{{ value_expression | percent [ : digitsInfo [ : locale ] ] }}
digitsInfo：十进制表示形式选项，由以下格式的字符串指定：{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}。
minIntegerDigits：小数点前的最小整数位数。默认值为1。
minFractionDigits：小数点后的最小位数。默认值为0。
maxFractionDigits：小数点后的最大位数。默认值为3。
可选的。默认值为undefined。
locale：用于要使用的语言环境格式规则的语言环境代码。当未提供，使用的值LOCALE_ID，这是en-US默认。请参阅设置应用程序区域设置。
可选的。默认值为undefined。
使用说明：
component({
selector: 'percent-pipe',
template: `<div>
<!--output '26%'-->
<p>A: {{a | percent}}</p>
<!--output '0,134.950%'-->
<p>B: {{b | percent:'4.3-5'}}</p>
<!--output '0 134,950 %'-->
<p>B: {{b | percent:'4.3-5':'fr'}}</p>
</div>`
})
export class PercentPipeComponent {
a: number = 0.259;
b: number = 1.3495;
}
```
