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

本文实例讲述了Angular2管道Pipe及自定义管道格式数据用法。分享给大家供大家参考，具体如下：

管道(Pipe)可以根据开发者的意愿将数据格式化，还可以多个管道串联。

纯管道(Pure Pipe)与非纯管道(Impure Pipe)

管道分纯管道(Pure Pipe)和非纯管道(Impure Pipe)。默认情况下，管道都是纯的，在自定义管道声明时把pure标志置为false,就是非纯管道。如:

rush:js;"> @Pipe({ name: 'sexReform',pure:false })

纯管道和非纯管道的区别:

① 纯管道:

Angular只有检查到输入值发生纯变更时，才会执行纯管道。纯变更指的是，原始类型值(

② 非纯管道

Angular会在每个组件的变更检测周期执行非纯管道。所以，如果使用非纯管道，我们就得注意性能问题了。

管道使用语法

{{expression | pipe : arg}}

如果是链式串联:

{{expression | pipe1 : arg | pipe2 | pipe3 }}

常用内置管道

DatePipe

语法:{{expression | date:format}}

支持日期对象、日期字符串、毫秒级时间戳。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相同，不再解释。

代码，其值为ISO 4217标准，人民币CNY,美元USD,欧元 EUR. display 是一个布尔值，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返回中文的男、女。

代码:

rush:js;"> 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方法，定义为非纯管道仅用于演示，非纯管道对性能影响较大，尽量避免。

演示代码

组件：

rush:js;"> 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() { } }

模板:

rush:xhtml;">

{{date| date:'y-MM-dd HH:mm:ss'}}
{{object| json }}
{{str| uppercase }}
{{str| lowercase }}
{{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程序设计有所帮助。

原文地址：https://www.jb51.cc/js/34952.html

Pipe 格式数据管道管道管道自定义管道