[转]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, 冰冻鱼. 请尊重作者劳动成果,复制转载保留本站链接! 应用开发笔记
[转]Angular2 使用管道Pipe以及自定义管道格式数据的更多相关文章
- Linux进程间通信之管道(pipe)、命名管道(FIFO)与信号(Signal)
整理自网络 Unix IPC包括:管道(pipe).命名管道(FIFO)与信号(Signal) 管道(pipe) 管道可用于具有亲缘关系进程间的通信,有名管道克服了管道没有名字的限制,因此,除具有管道 ...
- JqGrid 自定义子表格 及 自定义Json 格式数据不展示
项目第一次使用JqGrid ,发现功能强大,但由于对他不熟悉,也没有少走弯路,记录一下. 1.引用 <link href="~/Scripts/JqGrid/jqgrid/css/ui ...
- angular自定义管道
原文地址 https://www.jianshu.com/p/5140a91959ca 对自定义管道的认识 管道的定义中体现了几个关键点: 1.管道是一个带有“管道元数据(pipe metadata) ...
- Angular 自定义管道
管道的作用就是将原始值进行转化处理,转换为所需要的值: 1. 新建sex-reform.pipe.ts文件 ng g pipe sex-reform 2. 编辑sex-reform.pipe.ts文件 ...
- angular8自定义管道、指令以及获取dom值
版本: 1.自定义管道: example: 定义一个*ngFor 可以获取key值的管道 keyObject.pipe.ts // key value 管道 import { Pipe, PipeTr ...
- Angular:管道和自定义管道
①管道的使用,更多管道在angular官网上有 <p>全部转为大写:{{'hahahah' | uppercase}}</p> <p>保留两位小数:{{1.4555 ...
- 管道Pipe
管道Pipe java.nio.channels包中含有一个名为Pipe(管道)的类.广义上讲,管道就是一个用来在两个实体之间单向传输数据的导管.管道的概念对于Unix(和类Unix)操作系统的用户来 ...
- Linux简单程序实例(GNU工具链,进程,线程,无名管道pipe,基于fd的文件操作,信号,scoket)
一, GNU工具链简介: (1)编译代码步骤: 预处理 -> 编译 -> 汇编 -> 链接: 预处理:去掉注释,进行宏替换,头文件包含等工作: gcc -E test.c -o te ...
- 管道(Pipe)/createPipe
BOOL CreatePipe(PHANDLE hReadPipe, // 指向读句柄的指针 PHANDLE hWritePipe, // 指向写句柄的指针 LPSECURITY_ATTRIBUTES ...
随机推荐
- Android SDK Manager 无法打开
环境变量已经设置(安装JDK8后 其实无需设置,之前记得Win7有个巧妙的地方是创建了3个快捷方式到某文件夹,现在Win10上直接将java.exe等放到System32目录下). 但是依然不行,网上 ...
- 2018上IEC计算机高级语言(C)作业 第1次作业
1.经过这几周的学习,总结一下学习的心得与体会.(不少于100字:10分) 学习c语言已经一个学期了,刚开始学习的时候老是感觉力不从心.虽然认真听课了, 但是并不能理解它.这种情况到了后来才有所改变. ...
- str相关操作
大小写转换:*——记住 * upper() 全大写 title() 首字母大写(只要是不属于英文字母的都是分隔符) 切来切去: center(10,'*') 强行用*在原字符串左右两端拼接,拼接成十个 ...
- SWPU-ACM集训队周赛之组队赛(3-11) E题题解
点这里去做题 %*c 读入时跳过一位,本题中即跳过"-"; #include<stdio.h> int run(int x) //判断闰年 { ; ==&&a ...
- Django开启国际化的支持
基础环境介绍 IDE我用的pycharm Python 3.6.0 (v3.6.0:41df79263a11, Dec 22 2016, 17:23:13) [GCC 4.2.1 (Apple Inc ...
- (转载)RHEL7(RedHat 7)本地源的配置
配置yum源 1.首先连接RedHat7的DVD再把挂载DVD光盘到/mnt 因为配置时候路径名里面不能有空格,否则不能识别 [root@ mnt]# mount /dev/cdrom /mnt ...
- CentOS6最佳实践
一 安装常用软件 常用目录结构 源文件目录 /application,原包文件及解压文件 如 /application/Python-3.6.0.tgz 软件配置目录 /usr/local/ 如 ...
- 关于UIScrollView不能响应UITouch事件的解决办法
原因是:UIView的touch事件被UIScrollView捕获了. 解决办法:让UIScrollView将事件传递过去.于是最简单的解决办法就是加一个UIScrollView的category.这 ...
- Windows核心编程:第10章 同步设备IO与异步设备IO
Github https://github.com/gongluck/Windows-Core-Program.git //第10章 同步设备IO与异步设备IO.cpp: 定义应用程序的入口点. // ...
- word文档的python解析
主要两块,第一个是文件类型的转换,第二个是用docx包去对word文档中的table进行parse 1. 文件格式装换 因为很多各种各样的原因,至今还有一些word文档是doc的格式存的,对于这种,如 ...