Angular2管道Pipe及自定义管道格式数据用法实例分析

本文实例讲述了angular2管道pipe及自定义管道格式数据用法。分享给大家供大家参考，具体如下：

管道(pipe)可以根据开发者的意愿将数据格式化，还可以多个管道串联。

纯管道(pure pipe)与非纯管道(impure pipe)

管道分纯管道(pure pipe)和非纯管道(impure pipe)。默认情况下，管道都是纯的，在自定义管道声明时把pure标志置为false,就是非纯管道。如:

@pipe({
 name: 'sexreform',
 pure:false
})

纯管道和非纯管道的区别:

① 纯管道:

angular只有检查到输入值发生纯变更时，才会执行纯管道。纯变更指的是，原始类型值(string,number,boolean,symbol)的改变，或者对象引用的改变(对象值改变不是纯变更，不会执行).

② 非纯管道

angular会在每个组件的变更检测周期执行非纯管道。所以，如果使用非纯管道，我们就得注意性能问题了。

管道使用语法

{{expression | pipe : arg}}

如果是链式串联:

{{expression | pipe1 : arg | pipe2 | pipe3 }}

常用内置管道

管道	类型	功能
datepipe	纯管道	日期格式化
jsonpipe	非纯管道	使用json.stringify()将对象转成json字符串
uppercasepipe	纯管道	将文本中的字母全部转在大写
lowercasepipe	纯管道	将文本中的字母全部转成小写
decimalpipe	纯管道	数值格式化
currencypipe	纯管道	货币格式化
percentpipe	纯管道	百分比格式化
slicepipe	非纯管道	数组或字符串取切割

datepipe

语法:{{expression | date:format}}

expression支持日期对象、日期字符串、毫秒级时间戳。format是指定的格式,常用标志符：

y 年 y使用4位数字表示年份(2017),yy使用两位数字表示(17)
m 月 m 1位或两位数字(2或10、11、12),mm 两位数字表示，前面补0(02)
d 日 d 一位或两位数字(9) dd两位数字，前面补0(09)
e 星期 eee 三位字母缩写的星期 eeee 星期全称
j 12小时制时间 j (9 am) jj (09 am)
h 12小时制小时 h(9) hh (09)
h 24小时制小时 h(9) hh (09)
m 分 m (5) mm (05)
s 秒 s (1) ss (01)
z 时区 z china standard time

decimalpipe

语法：{{expression | number[: digiinfo] }}

digiinfo格式:

{minintegerdigits}.{minfractiondigits}-{maxfractiondigits}

即：整数位保留最小位数.小数位保留最小位数-小数位最大保留位置

默认值: 1.0-3

currencypipe

语法：{{expression | currency[: currencycode[: symboldisplay[: digiinfo]]] }}

digiinfo格式与decimalpipe相同，不再解释。

currencycod是指货币代码，其值为iso 4217标准，人民币cny,美元usd,欧元 eur.
symboldisplay 是一个布尔值，true时显示货币符号($￥) false显示货币码

percentpipe

语法：{{expression | percent[: digiinfo] }}

digiinfo格式与decimalpipe相同，不再解释。

slicepipe

语法：{{expression | slice: start [: end] }}

expression 可以是一个字符串或数组。字符串时，该管道调用string.prototype.slice()方法截取子串。如果是数组，调用array.prototype.slice()方法取数组子元素。

自定义管道

除了使用内置的管道，还可以通过自定义管道实现更复杂的功能。

创建管道:

ng g pipe sexreform

angular-cli会帮我们创建sexreformpipe管道,这个管道的功能是根据male、female返回中文的男、女。

代码:

import {pipe, pipetransform} from '@angular/core';
@pipe({
 name: 'sexreform',
 //非纯管道
 pure:false
})
export class sexreformpipe implements pipetransform {
 transform(value: any, args?: any): any {
  let chinesesex;
  switch (value) {
   case 'male':
    chinesesex = '男';
    break;
   case 'female':
    chinesesex = '女';
    break;
   default:
    chinesesex = '未知性别';
    break;
  }
  return chinesesex;
 }
}

重点在于实现pipetransform接口的transform方法，定义为非纯管道仅用于演示，非纯管道对性能影响较大，尽量避免。

演示代码

组件：

import { component, oninit } from '@angular/core';
@component({
 selector: 'app-pipe',
 templateurl: './pipe.component.html',
 styleurls: ['./pipe.component.css']
})
export class pipecomponent implements oninit {
 date=new date();
 money=5.9372;
 object={title:'ffff',subtitle:'subtitlefff'};
 str='abcdabcd';
 percent=0.97989;
 constructor() { }
 ngoninit() {
 }
}

模板:

<p>
 {{date| date:'y-mm-dd hh:mm:ss'}} <br />
 {{object| json }} <br />
 {{str| uppercase }} <br />
 {{str| lowercase }} <br />
 {{money| number:'2.4-10' }} <br />
 {{money| number:'5.1-2' }} <br />
 {{money| currency:'cny':false:'1.1-2' }} <br />
 {{percent| percent:'1.1-2' }} <br />
 {{str| slice:1:3 }} <br />
 {{'female'| sexreform }} <br />
</p>

更多关于angularjs相关内容感兴趣的读者可查看本站专题：《angularjs指令操作技巧总结》、《angularjs入门与进阶教程》及《angularjs mvc架构总结》

希望本文所述对大家angularjs程序设计有所帮助。