原文地址
https://www.jianshu.com/p/5140a91959ca
对自定义管道的认识
管道的定义中体现了几个关键点：
1、管道是一个带有“管道元数据(pipe metadata)”装饰器的类。
2、这个管道类实现了PipeTransform接口的transform方法，该方法接受一个输入值和一些可选参数，并返回转换后的值。
3、当每个输入值被传给transform方法时，还会带上另一个参数，比如我们这个管道中的exponent(放大指数)。
4、我们通过@Pipe装饰器告诉Angular：这是一个管道。该装饰器是从Angular的core库中引入的。
5、这个@Pipe装饰器允许我们定义管道的名字，这个名字会被用在模板表达式中。它必须是一个有效的JavaScript标识符。 比如，我们下面这个管道的名字是exponentialStrength。
PipeTransform接口
transform方法是管道的基本要素。 PipeTransform接口中定义了它，并用它指导各种工具和编译器。 理论上说，它是可选的。Angular不会管它，而是直接查找并执行transform方法。
自定义管道需要注意
我们使用自定义管道的方式和内置管道完全相同。
我们必须在AppModule的declarations数组中包含这个管道。
我们必须手动注册自定义管道。如果忘了，Angular就会报告一个错误。
还需要注意的是，我们使用的时候的管道的名字是自定义管道用@Pipe注解的时候命名的名字。
自定义管道实例
以下是我根据自定义管道的知识写的几个实例，有的是参考网上的实例在本地实现可行的代码，也在此提供参考
过滤todo
/*
管道中纯管道和非纯管道之间的区别关键在于：
如果是纯管道，他检测的深读很低，比如检测一个对象数组，对象数组中的对象的某个属性发生变化的时候，纯管道是检测不到的，这时候就需要用到非纯管道
*/
import {Pipe, PipeTransform} from '@angular/core';
/*
* Example:
* todoList | todosStatusPipe:'done':selectFilter
* 其实这里我们已知一定是根据todo的done属性来过滤，那么实际上是可以将'done'这个传值给去了，直接在管道方法中用done来判断，但是
* 这里主要是为了说明.引出的属性和[]引出的属性是有区别的，[]是可以传入变量来引出属性的
*/
@Pipe({
name: 'todosStatusPipe',
pure: false
})
export class TodosStatusPipe implements PipeTransform {
transform(value: Array<any>, filterString: string, status: string): Array<any> {
let filterTodoList = [];
switch(status){
case 'all':
filterTodoList = value;
break;
case 'active':
filterTodoList = value.filter(todo => !todo[filterString]);
break;
case 'completed':
filterTodoList = value.filter(todo => todo[filterString]);
break;
}
return filterTodoList;
}
}
指数倍增管道
/*
exponential-strength.pipe.ts
步骤 ：
1、导入Pipe，PipeTransform
2、通过注解定义名字，定义是纯管道还是非纯管道，默认是纯管道
3、定义管道并继承PipeTransform
4、实现继承的方法transform
*/
import { Pipe, PipeTransform } from '@angular/core';
/*
* Raise the value exponentially
* Takes an exponent argument that defaults to 1.
* Usage:
* value | exponentialStrength:exponent
* Example:
* {{ 2 | exponentialStrength:10 }}
* formats to: 1024
*/
@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
transform(value: number, exponent: string): number {
let exp = parseFloat(exponent);
return Math.pow(value, isNaN(exp) ? 1 : exp);
}
}
判断性别管道
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
name: 'sexReform',
//非纯管道
//重点在于实现PipeTransform接口的transform方法，定义为非纯管道仅用于演示，非纯管道对性能影响较大，尽量避免。
pure:false
})
export class SexReformPipe implements PipeTransform {
transform(value: any, args?: any): any {
let chineseSex;
switch (value) {
case 'male':
chineseSex = '男';
break;
case 'female':
chineseSex = '女';
break;
default:
chineseSex = '未知性别';
break;
}
return chineseSex;
}
}代码资料
angular实例代码中（https://github.com/crk123kk/angular-example）的angular-pipe-custom