【Angular】07管道pipe
原创
©著作权归作者所有:来自51CTO博客作者szlsay的原创作品,请联系作者获取转载授权,否则将追究法律责任
1、概念
管道的作用就是传输。不同的管道具有不同的作用。(其实就是处理数据)
angular
中自带的pipe
函数
管道
| 功能
|
DatePipe
| 日期管道,格式化日期
|
JsonPipe
| 将输入数据对象经过JSON.stringify()方法转换后输出对象的字符串
|
UpperCasePipe
| 将文本所有小写字母转换成大写字母
|
LowerCasePipe
| 将文本所有大写字母转换成小写字母
|
DecimalPipe
| 将数值按照特定的格式显示文本
|
CurrentcyPipe
| 将数值进行货币格式化处理
|
SlicePipe
| 将数组或者字符串裁剪成新子集
|
PercentPipe
| 将数值转百分比格式
|
2、用法
- {{ 输入数据 | 管道 : 管道参数}} (其中‘|’是管道操作符)
- 链式管道 {{ 输入数据 | date | uppercase}}
- 管道流通方向自左向右,逐层执行
使用脚手架命令:ng g p pipes/test 在pipes文件夹下创建test管道
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'test'
})
export class TestPipe implements PipeTransform {
transform(value: unknown, ...args: unknown[]): unknown {
// return null;
return '>>>'+value+'>>>';
}
}
export class STHomeComponent{
dateStr: Date = new Date();
nameStr: string = 'hEllo';
}
// 渲染结构
{{dateStr}}
<p>{{dateStr | date:'yyyy-MM-dd HH:mm:ss'}}</p>
<p>{{nameStr | uppercase | lowercase}}</p>
<p>{{nameStr | test}}</p>