Angular中的Pipe管道主要的目的是用来对输入的数据进行处理的(比如：大小写的转换、数值的计算、以及日期的格式化)
1、内置管道
| 管道名 | 用途 |
|---|---|
| DatePipe | 日期管道，格式化日期 |
| JsonPipe | 将输入数据对象经过JSON.stringify()方法转换后输出对象的字符串 |
| UpperCasePipe | 将文本所有小写字母转换成大写字母 |
| LowerCasePipe | 将文本所有大写字母转换成小写字母 |
| DecimalPipe | 将数值按特定的格式显示文本 |
| CurrentcyPipe | 将数值转百分比格式 |
| SlicePipe | 将数组或者字符串裁剪成新子集 |
- 大写转换：
<div>
<p>{{ 'abcd' | uppercase }}</p>
</div>
// ABCD
- 小写转换：
<div>
<p>{{ 'ABCD' | lowercase }}</p>
</div>
// abcd
-
数值转换：
DecimalPipe管道用于对数值的整数与小数部分按照指定规则进行格式化
{minIntegerDigits}.{minFractionDigits}-{maxfractionDigits}
- minIntegerDigits：整数部分保留最小的位数，默认值为1.
- minFractionDigits：小数部分保留最小的位数，默认值为0.
- maxFractionDigits：小数部分保留最大的位数，默认值为3.
<p>{{ 3.14159265 | number: '1.4-4' }}</p>
// 3.1416
-
日期格式化：
一般的格式：expression | date: format
表达式可以是 Date日期对象或者是日期字符串(2021/11/22)、毫秒级时间戳
<p>{{ '2021/11/22' | date: 'EEE' }}</p>
// Mon
-
JavaScript 对象序列化：
利用JSON.stringify()来将输入数据对象转换成对象字符串
obj = {
name:'zhangsan',
age:20,
foo(){
console.log('123');
}
}
<p>{{ obj | json }}</p>
// { "name": "zhangsan", "age": 20 }
-
CurrencyPipe货币管道：
可以将数值进行货币格式化处理
表达式：expression | currency[: currencyCode[: symbolDisplay[: digitInfo]]]
- 参数currentcyCode：表示要格式化的目标货币格式，值为ISO 4217货币码，如CNY人民币、USD美元、EUR欧元等。
- 参数symbolDisplay：表示以该类型货币的哪种格式显示，值为布尔值，true表示显示货币符号如￥、$等，false表示显示ISO 4217货币码如CNY、USD等。
- digitInfo：参考DecimalPipe管道。
<p>{{ 200.12 | currency:'CNY':true:'3.0-0' }}</p>
// CN¥200
-
PercentPipe百分比管道：
可以对数值进行百分比处理
表达式：expression | percent[: digitInfo]
<p>{{ 0.245 | percent:'2.1-2' }}</p>
// 24.5%
-
SlicePipe管道：
用于裁剪数组或字符串，返回裁剪后的目标子集
表达式：expression | slice: start[: end]
<p>{{ 0.245 | percent:'2.1-2' }}</p>
// 24.5%
2、管道链
管道链可以将多个管道连接在一起，组成管道链对数据进行处理。
str = 'abcde';
<p>{{ str | slice:0:3 | uppercase }}</p>
// ABC
3、自定义管道
开发者也可以自己去定义管道符，主要的步骤为以下几个步骤：
- 1、使用
@pipe装饰器去定义Pipe的metadata信息，比如管道符的名称 - 2、再去实现PipeTrandform接口中定义的transform方法
getKey.pipe.ts:
import { Pipe, PipeTransform } from '@angular/core';
// 获取对象的键值
@Pipe({ name: 'getKey' })
export class GetKeyPipe implements PipeTransform {
transform(value: any, args?:any): any {
return Object.keys(value).map((key) => Object.assign({ key }, value[key]));
}
}
4、管道分类：
- pure管道：仅当管道输入值变化的时候，才会执行转换操作，默认的类型是pure类型。
- impure管道：在每次变化检测期间都会执行。
Pipe管道相关ts接口定义：
export interface Pipe {
name: string;
pure ?: boolean;
}
PipeDecorator接口定义：
export const Pipe: PipeDecorator = <PipeDecorator>makeDecorator('Pipe', {
name: undefined,
pure: true, // 默认是pure
});
PipeTransform接口定义：
export interface PipeTransform {
transform(value: any, ...args: any[]): any;
}
5、PipeResolver部分
// @angular/compiler/src/pipe_resolver.ts
@CompilerInjectable()
export class PipeResolver {
constructor(private _reflector: ɵReflectorReader = ɵreflector) {}
// 通过内部的ɵReflectorReader对象提供的API读取metadata信息
resolve(type: Type<any>, throwIfNotFound = true): Pipe {
const metas = this._reflector.annotations(resolveForwardRef(type));
if (metas) {
// 读取保存的Pipe metadata 信息
const annotation = ListWrapper.findLast(metas, _isPipeMetadata);
if (annotation) { return annotation; }
}
if (throwIfNotFound) {
throw new Error(`No Pipe decorator found on ${stringify(type)}`);
}
return null;
}
}
网友评论