Angular4 开发实战：(8) 创建管道(Pipe)

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

Angular4中的管道其实也就是Angula1中的过滤器，用法一样，都是使用(|)符号。 在模板中使用管道 在HTML中的模板绑定符号{{}}内调用管道：

{{ name | uppercase }}

带参数的管道 当以HTML的形式使用管道时，如果需要传递参数给管道，只需在管道名字后面加冒号(:)即可。如果有多个参数，可以在每个参数后面都加入冒号(比如slice:1:5)。

{{ today | date:"MM/dd/yy" }}

链式管道 多个管道间用|符号隔开：

{{ today | date | uppercase}}

不过，Angular4中移除了部分Angular1中内置的过滤器。 Angular内置管道整理如下： 注：对纯管道和非纯管道的解释，可参考文章最后的附录。 下面会分别讲解每一个管道的用法。 DatePipe DatePipe用来格式化日期数据，使用方法如下：

{{ expression | date: format }}

expression可以是 ：

• Date日期对象
• 日期字符串，如”2016/04/05”
• 毫秒级时间戳
• format自定义日期格式如下表(取2016-06-08 20:05:08时间为例)

看例子：

// demo-pipe.component.html   
{{ today | date }} // Jun 10, 2017   

{{ today | date: 'y-MM-dd'}} // 2017-06-10   

// demo-pipe.component.ts   
this.today = new Date();

JsonPipe JsonPipe管道通过JSON.stringify()来将输入数据对象转换成对象字符串，该管道主要用于开发调试：

// demo-pipe.component.html    
<pre>{{jsonObject | json}}</pre>    

// demo-pipe.component.ts   
jsonObject: Object = {firstname: 'bar', lastname: 'qux', address: {street: 'aaa', tel: [1, 2]}};   

输出结果为：   
//json  
{   
  "firstname": "bar",   
  "lastname": "qux",   
  "address": {   
    "street": "aaa",   
    "tel": [1, 2]
  }  
}

UpperCasePipe UpperCasePipe管道用于将文本中所有小写字母转换成大写字母。 语法格式：

expression | uppercase

LowerCasePipe LowerCasePipe管道用于将文本中所有大写字母转换成小写字母。 语法格式：

expression | lowercase

DecimalPipe DecimalPipe管道用于对数值的整数与小数部分按照指定规则进行格式化，这种格式化方式也成为本地格式化处理，语法如下：

expression | number[:digitInfo]

参数digitInfo的格式如下：

{minIntegerDigits}.{minFractionDigits}-{maxfractionDigits}

• minIntegerDigits：整数部分保留最小的位数，默认值为1.
• minFractionDigits：小数部分保留最小的位数，默认值为0.
• maxFractionDigits：小数部分保留最大的位数，默认值为3.

用法如下：

// demo-pipe.component.html   
<p>A 变量：{{a | number: '3.4-5'}}</p>  
<p>B 变量：{{b | number: '3.1-5'}}</p>               

// demo-pipe.component.ts    
a: number = 2.718281828459045;  
b: number = 33456;       

转换后结果：   
a 变量：002.71828  
b 变量：33,456.0

格式化变量a所采用的参数为3.4-5，参数.左边的3表示整数位最少保留三位，原值整数位为1位不足3位，所以用0补齐。参数.右边的4-5表示保留小数的最小数位为4为，最大数位为5位，因原始数据小数位大于5位，所以保留四舍五入后的5位小数。 格式化变量b所采用的参数为3.1-5，参数.左边的3表示整数位最少保留三维，原值正式位为5位，大于3位，所以全部保留。参数.右边的1-5表示保留小数的最小数位为1位，最大数位为5位，因原始数据没有小数位，因此采用最小1位限制的规则，小数位补0。 CurrencyPipe CurrentPipe管道可以将数值进行货币格式化处理。语法如下：

expression | currency[: currencyCode[: symbolDisplay[: digitInfo]]]

• currentcyCode：表示要格式化的目标货币格式，值为ISO 4217货币码，如CNY人民币、USD美元、EUR欧元等。
• symbolDisplay：表示以该类型货币的哪种格式显示，值为布尔值，true表示显示货币符号如￥、$等，false表示显示ISO 4217货币码如CNY、USD等。
• digitInfo：参考DecimalPipe管道。

来个例子：

// demo-pipe.component.html   
<p>A 变量：{{ a | currency: 'USD': false }}</p>  
<p>B 变量：{{ b | currency: 'CNY': true: '3.1-3'}}</p>           

// demo-pipe.component.ts   
a: number = 0.259;  
b: number = 20.6745;       

转换后结果   
A 变量：USD0.259  
B 变量：￥020.675

PercentPipe PercentPipe管道可以对数值进行百分比处理。语法如下：

expression | percent[: digitInfo]

digitInfo：参考DecimalPipe管道

直接看例子：

// demo-pipe.component.html    
<p>A 变量：{{ a | percent }}</p>   
<p>B 变量：{{ b | percent: '3.1-3' }}</p>   

// demo-pipe.component.ts    
a: number = 0.279;  
b: number = 0.657;       

输出：   
A 变量：27.9%  
B 变量：065.7%

注意：这里的百分化处理是在原值的基础上进行乘以100%，而不是简单的字符串拼接。 SlicePipe SlicePipe管道用于裁剪数组或字符串，返回裁剪后的目标子集。 语法如下：

expression | slice: start[: end]

SlicePipe是基于Array.prototype.slice()方法和String.prototype.slice()方法来实现的。 实例：

// demo-pipe.component.html   

<p>{{ 'abcdef' | slice: 2 : 4}}</p>  
<p>   
  <span *ngFor="let a of ([1, 'b', 3, 'c', 4] | slice: 2)">   
    {{a}}   
  </span>  
</p>

自定义管道 自定义管道的步骤：

• 使用 @Pipe 装饰器定义 Pipe 的 metadata 信息，如 Pipe 的名称 - 即 name 属性
• 实现 PipeTransform 接口中定义的 transform 方法

我们来创建一个排序的管道sortPipe：

// app/pipes/sort.pipe.ts   
import { Pipe, PipeTransform } from '@angular/core';   

@Pipe({   
  name: 'sort'  
})  
export class SortPipe implements PipeTransform {    

  transform(array: Array<any>, args?: string): Array<any> {   
    array.sort((a: any, b: any) => {   
      if (a < b) {   
        return -1;   
      } else if (a > b) {   
        return 1;   
      } else {   
        return 0;   
      }   
    });   
    return array;   
  }   
}

在上面的代码中，我们使用@Pipe()装饰器定义了一个名为“”的管道，类的transform方法是管道的关键，它可以接受任意的参数，第一个为过滤值，后面的参数都是可选的过滤参数。 注：这里只是为了明显排序，其实可以直接使用array.sort()。 使用：

// demo-pipe.component.ts   
arr: number[] = [80, 2, 5, 30];   

// demo-pipe.component.html   
<li *ngFor="let a of (arr | sort)">{{a}}</li>

注：我们更倾向使用纯管道。对于自定义管道，默认是纯管道，如果需要转为非纯管道，可以将`@Pipe()`中的元数据的pure属性设置为false。 附录（来源官网）： 纯管道 Angular只有在它检测到输入值发生了纯变更时才会执行纯管道。 纯变更是指对原始类型值(String、Number、Boolean、Symbol)的更改， 或者对对象引用(Date、Array、Function、Object)的更改。 Angular会忽略(复合)对象内部的更改。 如果我们更改了输入日期(Date)中的月份、往一个输入数组(Array)中添加新值或者更新了一个输入对象(Object)的属性，Angular都不会调用纯管道。 非纯管道 Angular会在每个组件的变更检测周期中执行非纯管道。 非纯管道可能会被调用很多次，和每个按键或每次鼠标移动一样频繁。

如发现任何问题或有好的建议，欢迎在下方评论留言。