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


Posted in Javascript onNovember 29, 2017

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
Node.js返回JSONP详解
May 18 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 #Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 #Javascript
node.js中axios使用心得总结
Nov 29 #Javascript
Vue2.0用户权限控制解决方案
Nov 29 #Javascript
vue.js项目中实用的小技巧汇总
Nov 29 #Javascript
关于 angularJS的一些用法
Nov 29 #Javascript
ReactNative之FlatList的具体使用方法
Nov 29 #Javascript
You might like
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
优秀研究生自我鉴定
2013/12/04 职场文书
物流创业计划书
2014/02/01 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
实验室的标语
2014/06/20 职场文书
营业用房租赁协议书
2014/11/26 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python
mysql自增长id用完了该怎么办
2022/02/12 MySQL