Angular2管道Pipe及自訂管道格式資料用法執行個體分析，angular2pipe

Angular2管道Pipe及自訂管道格式資料用法執行個體分析，angular2pipe

本文執行個體講述了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() { }}

模板:

<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>