在shell中的管道是IPC,linux的进程间通讯有pipe,FIFO,signal。在linux中是被用来进程间通信的,也就是传递信息,那么在angular中做什么用呢?当然,用处有很多。
管道分为两种。
- 纯管道 (Pure Pipe)
- 非纯管道 (Impure Pipe)
默认情况下,管道都是纯的,在自定义管道的时候,如果把pure标志为false,就是非纯管道了。如:
1 | ({ |
纯管道和非纯管道的区别:
- 纯管道:
Angular只有检查到输入值发生纯变更时,才会执行纯管道。纯变更指的是,原始类型值(String,Number,Boolean,Symbol)的改变,或者对象引用的改变(对象值改变不是纯变更,不会执行). - 非纯管道:
Angular会在每个组件的变更检测周期执行非纯管道。所以,如果使用非纯管道,我们就得注意性能问题了。
【【总结】】
纯管道就是意味着:只要输入的参数发生变化就会执行;而非纯管道是:当angular的周期性检查时就会执行,这里稍微说一下,angular的周期性检查并不是”脏检查”,而是通过zone.js库。
内置Pipe
Angular内置了很多指令,这些指令大部分被用来格式化数据。管道可以将数据格式化显示,但是不改变源数据,所以是一个深复制,比如日期的显示。
pipe使用
和shell 语法一样,使用“|”来使用管道,格式为:1
{{ 输入数据 | 管道 : 管道参数 }}
例如:
1 | // app.component.ts文件 |
显示结果:
My App
My birthday is 03/25/2018
使用就是这么简单,当然Angular为我们提供了很多的内置管道。这里我们要记住一点,所有的Angular内置管道,我们是不需要import的,直接就可以在.html模板内使用。
管道 | 功能 |
---|---|
DatePipe | 日期管道,格式化日期 |
JsonPipe | 将输入数据对象经过JSON.stringify()方法转换后输出对象的字符串 |
UpperCasePipe | 将文本所有小写字母转换成大写字母 |
LowerCasePipe | 将文本所有大写字母转换成小写字母 |
DecimalPipe | 将数值按特定的格式显示文本 |
CurrentcyPipe | 将数值进行货币格式化处理 |
SlicePipe | 将数组或者字符串裁剪成新子集 |
PercentPipe | 将数值转百分比格式 |
接下来我们稍微讲一下使用方法:
- JsonPipe
JsonPipe管道通过JSON.stringify()来将输入数据对象转换成对象字符串.
1 | // app.component.ts |
显示结果:
My App
{
“name”: “xiaoming”,
“age”: “35”,
“family”: {
“parent”: “vincent”,
“mother”: “bella”
}
}
UpperCasePipe
大写转换。expression | uppercase
DecimalPipe
DecimalPipe管道用于对数值的整数与小数部分按照指定规则进行格式化,这种格式化方式也成为本地格式化处理,语法如下:expression | number[:digitInfo]
参数digitInfo的格式如下:{minIntegerDigits}.{minFractionDigits}-{maxfractionDigits}
a. minIntegerDigits:整数部分保留最小的位数,默认值为1.
b. minFractionDigits:小数部分保留最小的位数,默认值为0.
c. maxFractionDigits:小数部分保留最大的位数,默认值为3.
例如:
1 | // app.component.ts |
显示结果:
My App
000.4
PercentPipe
PercentPipe管道可以对数值进行百分比处理。语法如下:expression | percent[: digitInfo]
SlicePipe
SlicePipe管道用于裁剪数组或字符串,返回裁剪后的目标子集。语法如下:expression | slice: start[: end]
SlicePipe是基于Array.prototype.slice()方法和String.prototype.slice()方法来实现的。CurrencyPipe
CurrentPipe管道可以将数值进行货币格式化处理。语法如下:expression | currency[: currencyCode[: symbolDisplay[: digitInfo]]]
a. 数currentcyCode:表示要格式化的目标货币格式,值为ISO 4217货币码,如CNY人民币、USD美元、EUR欧元等。
b. 参数symbolDisplay:表示以该类型货币的哪种格式显示,值为布尔值,true表示显示货币符号如¥、$等,false表示显示ISO 4217货币码如CNY、USD等。
c. 参考DecimalPipe管道。
自定义Pipe
这么多Angular的内置命令,当然这些远远是不够的,所以有时候我们是需要自定义管道来解决我们的需求。
- 命令行输入
ng g p sexReform
Angular会为我们生成默认管道文件,我们来实现一个识别male展示为男,female展示为女。
1 | import { Pipe, PipeTransform } from '@angular/core'; |
注意我们使用管道的时候,需要在相应的*.module.ts内import进来。
管道性能优化
管道的使用需要注意一点的是Angular对管道的优化。我们来看例子:
1.命令行输入 ng g p selectFilter
1 | // select-filter.pipe.ts |
然后在app.module.ts内import这个管道,(一般angular会帮我们自动加入的)。
2.新建组件 ng g c pipeDemo
1 | // pipe-demmo.component.ts |
然后在app.component.html中引入这个组件。
当我们在input空间内输入一个以“李”开头的人名时,并不会刷新界面,原因是:
<div *ngFor="let contact of (contacts | selectFilter: '李')">
这段代码中的contacts是我们定义的数组,Angular监测体制并不会感受到他的变化,为什么呢?这是因为Angualr优化了管道的监测机制,它会忽略对象内值的变化,只会监测指向对象的指针是否发生改变。
当我们把自定义的指令 pure属性设置false,Angualr就会识别出来,然后刷新界面。所以我们在使用的时候需要注意。