angular2系统学习 - 管道

1.简介

管道可以在模板中转换显示的内容。

往管道中传入数据，然后管道转换数据，再返回出来。

我们可以把管道想象成一个方法，这个方法对输入值进行处理，然后再return出来。等于是在数据绑定阶段添加了一个数据处理的拦截器。

2.使用管道

{{ inputData | PipeName:args1,args2...}}

• inputData：输入数据
• ‘|’：管道操作符
• PipeName：管道名
• args1,args2…：可选参数。

3.链式管道

{{ inputData | PipeNameA:args | PipeNameB:args }}

4.自定义管道

管道就是用@Pipe装饰器装饰的类。

import { Pipe, Pipetransform } from '@angular/core';

@Pipe({ name: 'TestPipe' })
export class TestPipe implements Pipetransform {
    transform(value: number, exponent: string ): string{    
        //参数value:传入管道的数据;
        //参数exponent:管道参数;

        return '';
    }
}

这里注意几点
- 引入Pipe装饰器来告诉我们的类是管道。
- 引入Pipetransform用来继承，实现这个接口来自定义我们管道内如何处理数据。
- @Pipe内传入一个jsonObject，其中name属性即是管道的名字
- 继承的transform方法中，第一个参数:value是传入管道的数据，后面的参数是传入管道的参数。
- transform方法要返回一个值，也就是管道处理数据的结果。

5.管道与变更检测。

当我们输入管道的数据变化时，管道可以监听到它的变化，然后执行管道。

实际上，管道对值类型和引用类型的变量监听方法不一样。

• 对于值类型的数据，管道直接监听其值的变化。
• 对于引用类型的数据，管道监听指针是否变化。比如一个数组，我们往里push(item)，但是管道不会做出响应，因为这个数组的指针并没有改变。

6.纯(pure)管道与非纯(impure)管道

ng2中有两类管道：

• 纯管道(pure)
• 非纯管道(impure)

区别：
（1）纯管道
声明纯管道：

@Pipe({ 
    name: 'myPipe'
    //pure: true    //pure属性默认是true，所以不需要再次设定。
})

ng2只有检测输入值发生了纯变更时才会执行纯管道。纯变更是指：

- 值类型数据值的更改
- 引用类型数据指针的更改。

而对于对象内部的更改不会调用纯管道。

这种方式可以保证效率，所以一般我们都用纯管道。

（2）非纯管道

声明非纯管道：

@Pipe({
    name: 'myPipe',
    pure: false    //声明非纯管道的方式。
})

非纯管道比纯管道多了一项能力，当对象内部的值发生更改时就会触发非纯管道。

但是非纯管道会影响效率，ng2会在每个组件的变更检测周期中执行它。所以慎用。

7.纯管道与纯函数

纯管道使用纯函数。纯函数是指在处理输入并返回结果时，不会产生任何副作用的函数。（这里副作用暂时还没有理解透彻，但确定异步方法肯定不是纯函数。）

另外一个纯管道必须总是用纯函数来实现。

但是非纯管道没有此限定，使用纯函数与非纯函数都可以。

8.总结

其实开篇第一小结就把管道的含义说了出来。这里再总结一下。

• 管道是处理数据的一个方法，相当于在属性赋值时的一个拦截器。
• 管道分为纯管道与非纯管道，我们在定义管道的时候使用pure属性来确定声明哪一种管道。
• 尽量使用纯管道，慎重使用非纯管道。当然，有时也不比使用管道。