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

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

本文实例讲述了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() {

}

}

模板:

{http://{date| date:'y-MM-dd HH:mm:ss'}}

{{object| json }}

{{str| uppercase }}

{{str| loavYyeoxzwercase }}

{{money| number:'2.4-10' }}

{{money| number:'5.1-2' }}

{{money| currency:'CNY':false:'1.1-2' }}

{{percent| percent:'1.1-2' }}

{{str| slice:1:3 }}

{{'female'| sexReform }}

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。