5.4 定制管道 - RLwu/angular-start GitHub Wiki

定制管道

Angular2预置的管道并不是特别丰富，不过好在很容易自己实现一个管道。

1.声明元数据

和实现一个组件类似，一个管道也是具有特定元数据的类：

@Pipe({name:'ezp'})
class EzPipe{...}

Pipe注解为被装饰的类附加了管道元数据，其最重要的属性是name，也就是 我们在模板中调用这个管道时使用的名称。上面定义的管道，我们可以在模板中 这样使用：{{ data | ezp }}。

2.实现transform方法

管道必须实现一个预定的方法transform(input,args)，这个方法的input 参数代表输入数据，args参数代表输入参数，返回值将被作为管道的输出。

下面的示例简单地将输入数据与所有参数拼接在一起：

@Pipe({name:'ezp'})
class EzPipe{
    transform(input,args){
        return input + " " +args.join(" ");
    }
}

3.使用自定义管道

在组件的模板中使用自定义管道之前，需要预先声明一下，以便Angular2注入。 使用Component注解的pipes属性进行声明：pipes:[EzPipe]。

现在，我们就可以使用这个自定义管道了：

<!--结果："call join mary linda"-->
{{ "call " | ezp:'john':'mary':'linda' }}