首页 专题 H5案例 前端导航 UI框架

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

作者:TG 日期: 2017-06-11 阅读: 2731
管道可以在模板中转换显示的内容。

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会在每个组件的变更检测周期中执行非纯管道。 非纯管道可能会被调用很多次,和每个按键或每次鼠标移动一样频繁。

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


关注”全栈技术杂货铺“

全栈技术杂货铺