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 Prototype对象
Jan 07 Javascript
表单验证的完整应用案例探讨
Mar 29 Javascript
JavaScript—window对象使用示例
Dec 09 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
详解Angular2响应式表单
Jun 14 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 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验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
Smarty模板配置实例简析
2019/07/20 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
微信小程序前端源码逻辑和工作流
2016/09/25 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python 中迭代器与生成器实例详解
2017/03/29 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
Python处理文本换行符实例代码
2018/02/03 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
对Python函数设计规范详解
2019/07/19 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
村党支部对照检查材料思想汇报
2014/09/28 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
2015入党自荐书范文
2015/03/05 职场文书
工地食品安全责任书
2015/05/09 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
期中考试后的感想
2015/08/07 职场文书
初一英语教学反思
2016/02/15 职场文书
一条慢SQL语句引发的改造之路
2022/03/16 MySQL