angular4之管道
1. 什么是管道?
日常生活中,管道就是进行疏通,过滤,连接各个渠道的工具。
2. angular的管道是什么?
所有的编程灵感都源于对生活便利。angular的管道主要作用是用于过滤和连接数据。
步入正题:
angular4为我们内置了多种管道。
具体用法:
用在所需过滤的数据后面以 | 隔开,以:后面作为参数传递,如需多个参数,可以多个冒号隔开。例如 2222 | number:'1':'2' , 这里只是打个比喻。这里补充点,对于number的参数解释: 如 1.1-2 意思是 以小数点前至少保留1位数,小数点后至少保留1位,最多保留两位,且还会对其进行四舍五入。
链式操作
类似于Jquery,管道也可以进行链式过滤,例如 2222 | currency: '$' | number:'1':'2' , 先用currency过滤后,在执行number的过滤。
自定义管道
管道也可进行自定义,依照angular4的版本,国际惯例,上图。
angular4以上版本创建管道实现PipeTransform接口 ,重写transform方法,transform有两个参数,分别为过滤的值和传入管道的参数。
使用方法:
非纯管道
什么是非纯管道?
以上咱们所写的都是纯管道,在没有特殊指明的管道都为纯管道(也就是说默认的都是纯管道)。
关于管道变更,运用官网的一句话。
Angular 只有在它检测到输入值发生了纯变更时才会执行纯管道。 纯变更是指对原始类型值(String
、Number
、Boolean
、Symbol
)的更改, 或者对对象引用(Date
、Array
、Function
、Object
)的更改。
这就产生一个问题,假如我们有个数组,每次点击往数组增加一个数据,对于纯管道来说,数组本身引用不便,就不会触发管道。你可以选择每次都创建一个新的数组,从而让纯管道触发变更。后者,你可以用我们要讲的非纯管道。
非纯管道,只要管道应用所在的数据的值发生变化,意思就是和上一次的数值不同,就会触发变更。
非纯管道的写法:
其用法和纯管道相同。
非纯 AsyncPipe
对于第一次看asyncPipe,我也是一头雾水。但使用之后,发生真的好方便。
asyncPipe是一个内置管道,接受一个 Promise
或 Observable
作为输入,并且自动订阅这个输入,最终返回它们给出的值。
什么是promise?可以百度看看阮一峰大神的es6。
什么是Observable
?其涉及到一个模式,观察者模式,有兴趣的同学可以百度看看其原理。
观察者模式,来源于生活。例如,我们需要看一个节目,首先,我们需要订阅节目,才可以知道什么时候可以看节目。其次,做节目的人,发送通知,通知我们可以看节目了,我们才可以真正的看节目。拿http来说,Observable
是一个观察者对象,首先,我们需要订阅,告诉http我们订阅了,啥时候给我们数据,http请求完,然后发送通知,通知我们数据到手,赶紧拿去,这时候,我们就可以进行操作。而AsyncPipe就是让我们免去了订阅这个步骤,它会自动帮我们订阅,直接帮我们拿到了数据。写法截至官网:
以上只是对官网,进行详细的说明,有兴趣的朋友可以看看官网的教程:https://angular.cn/guide/pipes#appendix-no-emfilterpipeem-or-emorderbypipeem.