定义
管道用于在模板中转换显示的内容
案例
@Pipe({
name : 'addHero'
})
export class AddHeroPipe implements PipeTransform{
transform(pre : string) {
return pre + ' is a Hero';
}
}
详解
1. 使用@Pipe注解
通常情况下我们只需要用到name属性，对该自定义管道命名即可。在源码定义上Pipe注解还有另一个可选属性pure，默认为true，它定义了管道的检测更新策略。
export interface Pipe {
name: string;
pure?: boolean;
}
什么意思呢？首先我们应当知道管道作为值的预处理，它可以极大地消耗应用运行速度。例如在一个ngFor中，每个值都被管道接管，如果它过于繁重，那么你的应用很可能像蜗牛一样让你着急。所以我们实现的transform应当保证足够轻快。这是我们能做出的努力。那么Angular方面为我们做了哪些努力呢？正是这所谓的纯管道。
我们爬一个官网的例子：
<div *ngFor="let hero of (heroes | flyingHeroes)">
{{hero.name}}
</div>
这个场景需要从一堆英雄中过滤一部分会飞的英雄，我们实现之后看起来很妥当。
那么我们来额外添加一个会飞的英雄，
heroes.push(flyingHero);
此时将发现视图并没有更新，对的，纯管道为了更快，对于所有非纯变更的值放弃更新检测。所谓纯变更，指原型变量(String、Number等)值变更或引用型变量(Array、Object等)引用变更。
我们的英雄们大本营（heroes的引用地址）并没有搬走，它只是接纳了一些新英雄。所以不足以来个大搜查。
如果我们强制改变引用：
heroes = heroes.concat(flyingHero)
是的，视图更新了。
对于非纯管道我们需要慎重，Angular会在每个组件的变更检测周期中执行非纯管道，而且可能会超乎你意料的频繁
2. 实现PipeTransform接口
自定义管道必须实现PipeTransform接口，它在源码中如下定义：
export interface PipeTransform {
transform(value: any, ...args: any[]): any;
}
管道的概念可以理解为值的流向，例如日期值流经DatePipe可以被处理为适合阅读的格式。自定义管道正是为了定制这个处理方式。
当我们实现PipeTransform的transform方法，流入管道的原值作为第一个参数，其它过滤条件作为第二个参数（不定参）被我们获取
摘取官网一个案例加以说明：
<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>
其中birthday为未经处理的原值，它被date管道处理，附加的条件使用:分隔并允许多个，此处只有一个参数"MM/dd/yy"，那么在transform中，
value为birthday原值，第二个参数我们将获取到字符串"MM/dd/yy"
此时我们经过一系列处理，返回需要流出的值即可。
