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属性来确定声明哪一种管道。
- 尽量使用纯管道,慎重使用非纯管道。当然,有时也不比使用管道。