Angular2 源码解读 - 自定义管道@Pipe

定义

管道用于在模板中转换显示的内容

案例

@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方面为我们做了哪些努力呢？正是这所谓的纯管道。

我们爬一个官网的例子：

  {{hero.name}}

这个场景需要从一堆英雄中过滤一部分会飞的英雄，我们实现之后看起来很妥当。

那么我们来额外添加一个会飞的英雄，

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方法，流入管道的原值作为第一个参数，其它过滤条件作为第二个参数（不定参）被我们获取

摘取官网一个案例加以说明：

The hero's birthday is {{ birthday | date:"MM/dd/yy" }} 

其中birthday为未经处理的原值，它被date管道处理，附加的条件使用:分隔并允许多个，此处只有一个参数"MM/dd/yy"，那么在transform中，

value为birthday原值，第二个参数我们将获取到字符串"MM/dd/yy"

此时我们经过一系列处理，返回需要流出的值即可。

防爬 ：原文来自[ - 沐心chen]