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程序设计有所帮助。
上一篇: 关于 angularJS的一些用法
下一篇: 激情铁头功,口水女汉子动态图片