当前位置：首页 > 资讯 > 技术文档

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

时间：2022-09-26 13:41 编辑：来源：阅读：
扫一扫，手机访问

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

本文实例讲述了Angular2管道Pipe及自定义管道格式数据用法。分享给大家供大家参考，具体如下：管道(Pipe)可以根据开发者的意愿将数据格式化，还可以多个管道串联。 [b]纯管道(Pure Pipe)与非纯管道(Impure Pipe)[/b] 管道分纯管道(Pure Pipe)和非纯管道(Impure Pipe)。默认情况下，管道都是纯的，在自定义管道声明时把pure标志置为false,就是非纯管道。如:

@Pipe({
 name: 'sexReform',
 pure:false
})

[b]纯管道和非纯管道的区别:[/b] ① 纯管道: Angular只有检查到输入值发生纯变更时，才会执行纯管道。纯变更指的是，原始类型值(String,Number,Boolean,Symbol)的改变，或者对象引用的改变(对象值改变不是纯变更，不会执行). ② 非纯管道 Angular会在每个组件的变更检测周期执行非纯管道。所以，如果使用非纯管道，我们就得注意性能问题了。 [b]管道使用语法[/b] [code]{{expression | pipe : arg}}[/code] 如果是链式串联: [code]{{expression | pipe1 : arg | pipe2 | pipe3 }}[/code] [b]常用内置管道[/b]

管道	类型	功能
DatePipe	纯管道	日期格式化
JsonPipe	非纯管道	使用JSON.stringify()将对象转成json字符串
UpperCasePipe	纯管道	将文本中的字母全部转在大写
LowerCasePipe	纯管道	将文本中的字母全部转成小写
DecimalPipe	纯管道	数值格式化
CurrencyPipe	纯管道	货币格式化
PercentPipe	纯管道	百分比格式化
SlicePipe	非纯管道	数组或字符串取切割

[b]DatePipe[/b] 语法:[code]{{expression | date:format}}[/code] 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 [b]DecimalPipe[/b] 语法：[code]{{expression | number[: digiInfo] }}[/code] digiInfo格式: [code]{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}[/code] 即：整数位保留最小位数.小数位保留最小位数-小数位最大保留位置默认值: 1.0-3 [b]CurrencyPipe[/b] 语法：[code]{{expression | currency[: currencyCode[: symbolDisplay[: digiInfo]]] }}[/code] digiInfo格式与DecimalPipe相同，不再解释。 currencyCod是指货币代码，其值为ISO 4217标准，人民币CNY,美元USD,欧元 EUR. symbolDisplay 是一个布尔值，true时显示货币符号($￥) false显示货币码 [b]PercentPipe[/b] 语法：[code]{{expression | percent[: digiInfo] }}[/code] digiInfo格式与DecimalPipe相同，不再解释。 [b]SlicePipe[/b] 语法：[code]{{expression | slice: start [: end] }}[/code] expression 可以是一个字符串或数组。字符串时，该管道调用[code]String.prototype.slice()[/code]方法截取子串。如果是数组，调用[code]Array.prototype.slice()[/code]方法取数组子元素。 [b]自定义管道[/b] 除了使用内置的管道，还可以通过自定义管道实现更复杂的功能。 [b]创建管道:[/b] [code]ng g pipe sexReform[/code] 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方法，定义为非纯管道仅用于演示，非纯管道对性能影响较大，尽量避免。 [b]演示代码[/b] [b]组件：[/b]

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() {
 }
}

[b]模板:[/b]

<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相关内容感兴趣的读者可查看本站专题：《[url=http://www.1sucai.cn/Special/919.htm]AngularJS指令操作技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/893.htm]AngularJS入门与进阶教程[/url]》及《[url=http://www.1sucai.cn/Special/898.htm]AngularJS MVC架构总结[/url]》希望本文所述对大家AngularJS程序设计有所帮助。

全部评论(0)

上一篇：AngularJS使用ng-repeat遍历二维数组元素的方法详解
下一篇：深入理解Angular4订阅(Subscribe)与取消

资讯排行榜
更多>>