Angular框架中的Pipe管道符（配合8.X源码）

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;
  }
}