[转]Angular2 使用管道Pipe以及自定义管道格式数据
本文转自:https://www.pocketdigi.com/20170209/1563.html
管道(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-3CurrencyPipe
语法:{{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>
© 2017, 冰冻鱼. 请尊重作者劳动成果,复制转载保留本站链接! 应用开发笔记
转载于:https://www.cnblogs.com/freeliver54/p/9728309.html
[转]Angular2 使用管道Pipe以及自定义管道格式数据相关推荐
- Linux进程间通信之管道(pipe)、命名管道(FIFO)与信号(Signal)
整理自网络 Unix IPC包括:管道(pipe).命名管道(FIFO)与信号(Signal) 管道(pipe) 管道可用于具有亲缘关系进程间的通信,有名管道克服了管道没有名字的限制,因此,除具有管道 ...
- 进程间的通信方式(二):管道Pipe和命令管道FIFO
1.概述 管道是最初的Unix IPC通信,可追溯到1973年的Unix第三版.尽管对于许多操作来说很有用,但它们的根本局限于没有名字,只能由亲缘关系的进程使用.这一点随着FIFO的加入System ...
- Linux内核中无名管道pipe和有名管道fifo的分析
1.管道(pipe) 管道是进程间通信的主要手段之一.一个管道实际上就是个只存在于内存中的文件,对这个文件的操作要通过两个已经打开文件进行,它们分别代表管道的两端.管道是一种特殊的文件,它不属于某一种 ...
- 【Linux系统编程学习】匿名管道pipe与有名管道fifo
此为牛客Linux C++和黑马Linux系统编程课程笔记. 0. 关于进程通信 Linux环境下,进程地址空间相互独立,每个进程各自有不同的用户地址空间.任何一个进程的全局变量在另一个进程中都看不到 ...
- 匿名管道(Pipe)和命名管道(FIFO)
catalogue 1. pipe匿名管道 2. named pipe(FIFO)有名管道 1. pipe匿名管道 管道是Linux中很重要的一种通信方式,是把一个程序的输出直接连接到另一个程序的输入 ...
- #Linux#进程间通信# 管道(pipe)-标准流管道pipe
在#Linux#进程间通信# 管道(pipe)-普通管道pipe中,我们很容易可以看出普通管道一是单工,即只能单向传输,而标准流管道针对匿名管道PIPE一系列封装.返回文件流.只不过返回的文件流无法使 ...
- linux系统调用创建无名管道,linux 无名管道pipe和有名管道FIFO
1.管道(pipe) 管道是进程间通信的主要手段之一.一个管道实际上就是个只存在于内存中的文件,对这个文件的操作要通过两个已经打开文件进行,它们分别代表管道的两端.管道是一种特殊的文件,它不属于某一种 ...
- linux学习---linux基于文件的IPC(匿名管道pipe,命名管道mkfifo,普通文件,socket文件)
常用的IPC分为两个类别,一是基于文件,而是基于内存 基于文件的分别有匿名管道,有名管道,普通的文件共享,socket文件 基于内存的有普通内存共享(本文章没有介绍),共享内存,共享信号量,消息队列 ...
- Angular 通过管道pipe,转换后台字典数据
背景:系统中很多字典数据都是在后台获取,通常是一些数字或者字母.我们要把他转换成用户看得懂的文字 一.列表字典数据转换(只能在页面使用) 1.创建pipe文件 dictData 为页面查询到的字典数据 ...
最新文章
- Java学习笔记---字符类型
- oracle 10g SYSAUX表空间快速增长之WRH$_SQL_PLAN篇
- 比一比Nmap、Zmap、Masscan三种扫描工具
- java druid mysql连接池_java使用Druid连接池连接mysql
- [转] C#中Dispose和Close的区别
- 安卓微信下video退出视频全屏方法
- storm-基本概念
- 计算机工程学院运动会方阵口号,运动会方阵口号(精选多篇)
- 自己实践的mac安装python3Linux安装python3
- 20210107WEB渗透学习之信息收集
- JavaWEB作业 用CSS制作高仿QQ空间
- ASP.NET MVC5中局部视图的更新
- AutoCAD系统变量和环境变量
- 网页打印与标准纸张换算 px与cm换算
- 如何配置java环境_vscode配置java环境
- evm?衡そΑ_RGB? CMYK? Α? 什么是图像通道,它们是什么意思?
- doNet面试宝典-常见整理(重复率高)
- docker启动Tomcat卡住不动
- 网络分析仪测试线损_求e5071c网络分析仪校50欧姆阻抗与线损方法,标准...
- ps拾取颜色设置文字颜色
热门文章
- java抽象类重载_在JAVA中使用一个抽象方法的重载方法
- python列表操作程序_Python入门篇(三)之列表
- 城市运行一网统管_全国率先!“一屏观天下、一网管全城”,临港城市运行“一网统管”平台启动建设...
- 注意力测试软件系统,儿童注意力训练评估软件 - 训练评估软件 - 唯普诺心理,心理测评系统,心理测评软件,婴幼儿智能发育,心理软件...
- matlab单元数组和结构,Matlab使用单元数组和结构数组
- 2014年二级c语言,2014年计算机二级考试C语言选择题
- python画害羞的表情_用Python把你的朋友变成表情包
- HTML+CSS+JS实现 ❤️酷炫3D瀑布流动画特效❤️
- mysql 事务sqlserver_SQLServer数据库:事务与隔离级别实例讲解
- ginapi服务器性能,gin框架构建Api之:环境配置和路由