Angular2管道Pipe及自定義管道格式數(shù)據(jù)用法實(shí)例分析

本文實(shí)例講述了Angular2管道Pipe及自定義管道格式數(shù)據(jù)用法。分享給大家供大家參考，具體如下：

管道(Pipe)可以根據(jù)開發(fā)者的意愿將數(shù)據(jù)格式化，還可以多個(gè)管道串聯(lián)。

純管道(Pure Pipe)與非純管道(Impure Pipe)

管道分純管道(Pure Pipe)和非純管道(Impure Pipe)。默認(rèn)情況下，管道都是純的，在自定義管道聲明時(shí)把pure標(biāo)志置為false,就是非純管道。如:

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

純管道和非純管道的區(qū)別:

① 純管道:

Angular只有檢查到輸入值發(fā)生純變更時(shí)，才會(huì)執(zhí)行純管道。純變更指的是，原始類型值(String,Number,Boolean,Symbol)的改變，或者對(duì)象引用的改變(對(duì)象值改變不是純變更，不會(huì)執(zhí)行).

② 非純管道

Angular會(huì)在每個(gè)組件的變更檢測周期執(zhí)行非純管道。所以，如果使用非純管道，我們就得注意性能問題了。

管道使用語法

{{expression | pipe : arg}}

如果是鏈?zhǔn)酱?lián):

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

常用內(nèi)置管道

DatePipe

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

expression支持日期對(duì)象、日期字符串、毫秒級(jí)時(shí)間戳。format是指定的格式,常用標(biāo)志符：

y 年 y使用4位數(shù)字表示年份(2017),yy使用兩位數(shù)字表示(17)
M 月 M 1位或兩位數(shù)字(2或10、11、12),MM 兩位數(shù)字表示，前面補(bǔ)0(02)
d 日 d 一位或兩位數(shù)字(9) dd兩位數(shù)字，前面補(bǔ)0(09)
E 星期 EEE 三位字母縮寫的星期 EEEE 星期全稱
j 12小時(shí)制時(shí)間 j (9 AM) jj (09 AM)
h 12小時(shí)制小時(shí) h(9) hh (09)
H 24小時(shí)制小時(shí) H(9) HH (09)
m 分 m (5) mm (05)
s 秒 s (1) ss (01)
z 時(shí)區(qū) z China Standard Time

DecimalPipe

語法：{{expression | number[: digiInfo] }}

digiInfo格式:

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

即：整數(shù)位保留最小位數(shù).小數(shù)位保留最小位數(shù)-小數(shù)位最大保留位置

默認(rèn)值: 1.0-3

CurrencyPipe

語法：{{expression | currency[: currencyCode[: symbolDisplay[: digiInfo]]] }}

digiInfo格式與DecimalPipe相同，不再解釋。

currencyCod是指貨幣代碼，其值為ISO 4217標(biāo)準(zhǔn)，人民幣CNY,美元USD,歐元 EUR.
symbolDisplay 是一個(gè)布爾值，true時(shí)顯示貨幣符號(hào)($￥) false顯示貨幣碼

PercentPipe

語法：{{expression | percent[: digiInfo] }}

digiInfo格式與DecimalPipe相同，不再解釋。

SlicePipe

語法：{{expression | slice: start [: end] }}

expression 可以是一個(gè)字符串或數(shù)組。字符串時(shí)，該管道調(diào)用String.prototype.slice()方法截取子串。如果是數(shù)組，調(diào)用Array.prototype.slice()方法取數(shù)組子元素。

自定義管道

除了使用內(nèi)置的管道，還可以通過自定義管道實(shí)現(xiàn)更復(fù)雜的功能。

創(chuàng)建管道:

ng g pipe sexReform

angular-cli會(huì)幫我們創(chuàng)建SexReformPipe管道,這個(gè)管道的功能是根據(jù)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;
 }
}

重點(diǎn)在于實(shí)現(xiàn)PipeTransform接口的transform方法，定義為非純管道僅用于演示，非純管道對(duì)性能影響較大，盡量避免。

演示代碼

組件：

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>

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com