位置: 编程技术 - 正文
Angular2管道Pipe及自定义管道格式数据用法实例分析(angular api)
发布时间：2024-02-27推荐整理分享Angular2管道Pipe及自定义管道格式数据用法实例分析(angular api)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:angular provider,angular的排序管道,angular async管道,angular的排序管道,angular 管道,angular pipe,angular 管道,angular pipe,内容如对您有帮助，希望把文章链接给更多的朋友！
本文实例讲述了Angular2管道Pipe及自定义管道格式数据用法。分享给大家供大家参考，具体如下：
管道(Pipe)可以根据开发者的意愿将数据格式化，还可以多个管道串联。
纯管道(Pure Pipe)与非纯管道(Impure Pipe)
管道分纯管道(Pure Pipe)和非纯管道(Impure Pipe)。默认情况下，管道都是纯的，在自定义管道声明时把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位数字表示年份(),yy使用两位数字表示()M 月 M 1位或两位数字(2或、、),MM 两位数字表示，前面补0()d 日 d 一位或两位数字(9) dd两位数字，前面补0()E 星期 EEE 三位字母缩写的星期 EEEE 星期全称j 小时制时间 j (9 AM) jj ( AM)h 小时制小时 h(9) hh ()H 小时制小时 H(9) HH ()m 分 m (5) mm ()s 秒 s (1) ss ()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 标准，人民币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返回中文的男、女。
代码:
重点在于实现PipeTransform接口的transform方法，定义为非纯管道仅用于演示，非纯管道对性能影响较大，尽量避免。
演示代码
组件：
模板:
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
详解angularjs实现echart图表效果最简洁教程 本文介绍了详解angularjs实现echart图表效果最简洁教程，分享给大家，具体如下：ehcart是百度做的数据图表，基于原生js。接口和配置都写的很好很易读，
3种vue组件的书写形式 本文实例为大家分享了vue组件的书写形式，供大家参考，具体内容如下第一种使用script标签!DOCTYPEhtmlhtmlbodydivid="app"my-component/my-component/div--注意：使用scr
vue的状态管理模式vuex vuex是一个专门为vue.js设计的状态管理模式，并且也可以使用devtools进行调试。备注：本文的示例等代码将会采用es6的语法。链接vuex官方中文网站使用vue
标签: angular api
本文链接地址:https://www.jiuchutong.com/biancheng/378937.html 转载请保留说明！
