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 相关文章推荐
使用js获取地址栏中传递的值
Jul 02 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
vue.js的安装方法
May 12 Javascript
微信小程序自定义组件
Aug 16 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 Javascript
JavaScript canvas实现流星特效
May 20 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 MessagePack介绍
2013/10/06 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
python读取中文txt文本的方法
2018/04/12 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
环境工程毕业生自荐信
2013/11/17 职场文书
烹调加工管理制度
2014/02/04 职场文书
单位承诺书格式
2014/05/21 职场文书
体育比赛口号
2014/06/09 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
公司2015年终工作总结
2015/05/26 职场文书
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android