Angular2管道Pipe及自定义管道格式数据用法实例分析
本文实例讲述了Angular2管道Pipe及自定义管道格式数据用法。分享给大家供大家参考,具体如下:
管道(Pipe)可以根据开发者的意愿将数据格式化,还可以多个管道串联。
纯管道(PurePipe)与非纯管道(ImpurePipe)
管道分纯管道(PurePipe)和非纯管道(ImpurePipe)。默认情况下,管道都是纯的,在自定义管道声明时把pure标志置为false,就是非纯管道。如:
@Pipe({ name:'sexReform', pure:false })
纯管道和非纯管道的区别:
①纯管道:
Angular只有检查到输入值发生纯变更时,才会执行纯管道。纯变更指的是,原始类型值(String,Number,Boolean,Symbol)的改变,或者对象引用的改变(对象值改变不是纯变更,不会执行).
②非纯管道
Angular会在每个组件的变更检测周期执行非纯管道。所以,如果使用非纯管道,我们就得注意性能问题了。
管道使用语法
{{expression|pipe:arg}}
如果是链式串联:
{{expression|pipe1:arg|pipe2|pipe3}}
常用内置管道
DatePipe
语法:{{expression|date:format}}
expression支持日期对象、日期字符串、毫秒级时间戳。format是指定的格式,常用标志符:
y年y使用4位数字表示年份(2017),yy使用两位数字表示(17)
M月M1位或两位数字(2或10、11、12),MM两位数字表示,前面补0(02)
d日d一位或两位数字(9)dd两位数字,前面补0(09)
E星期EEE三位字母缩写的星期EEEE星期全称
j12小时制时间j(9AM)jj(09AM)
h12小时制小时h(9)hh(09)
H24小时制小时H(9)HH(09)
m分m(5)mm(05)
s秒s(1)ss(01)
z时区zChinaStandardTime
DecimalPipe
语法:{{expression|number[:digiInfo]}}
digiInfo格式:
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
即:整数位保留最小位数.小数位保留最小位数-小数位最大保留位置
默认值:1.0-3
CurrencyPipe
语法:{{expression|currency[:currencyCode[:symbolDisplay[:digiInfo]]]}}
digiInfo格式与DecimalPipe相同,不再解释。
currencyCod是指货币代码,其值为ISO4217标准,人民币CNY,美元USD,欧元EUR.
symbolDisplay是一个布尔值,true时显示货币符号($¥)false显示货币码
PercentPipe
语法:{{expression|percent[:digiInfo]}}
digiInfo格式与DecimalPipe相同,不再解释。
SlicePipe
语法:{{expression|slice:start[:end]}}
expression可以是一个字符串或数组。字符串时,该管道调用String.prototype.slice()方法截取子串。如果是数组,调用Array.prototype.slice()方法取数组子元素。
自定义管道
除了使用内置的管道,还可以通过自定义管道实现更复杂的功能。
创建管道:
nggpipesexReform
angular-cli会帮我们创建SexReformPipe管道,这个管道的功能是根据male、female返回中文的男、女。
代码:
import{Pipe,PipeTransform}from'@angular/core'; @Pipe({ name:'sexReform', //非纯管道 pure:false }) exportclassSexReformPipeimplementsPipeTransform{ transform(value:any,args?:any):any{ letchineseSex; switch(value){ case'male': chineseSex='男'; break; case'female': chineseSex='女'; break; default: chineseSex='未知性别'; break; } returnchineseSex; } }
重点在于实现PipeTransform接口的transform方法,定义为非纯管道仅用于演示,非纯管道对性能影响较大,尽量避免。
演示代码
组件:
import{Component,OnInit}from'@angular/core'; @Component({ selector:'app-pipe', templateUrl:'./pipe.component.html', styleUrls:['./pipe.component.css'] }) exportclassPipeComponentimplementsOnInit{ date=newDate(); money=5.9372; object={title:'ffff',subTitle:'subtitlefff'}; str='abcdABCD'; percent=0.97989; constructor(){} ngOnInit(){ } }
模板:
{{date|date:'y-MM-ddHH:mm:ss'}}
{{object|json}}
{{str|uppercase}}
{{str|lowercase}}
{{money|number:'2.4-10'}}
{{money|number:'5.1-2'}}
{{money|currency:'CNY':false:'1.1-2'}}
{{percent|percent:'1.1-2'}}
{{str|slice:1:3}}
{{'female'|sexReform}}
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJSMVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。