本文轉自：https://www.pocketdigi.com/20170209/1563.html

?

管道(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>

? 2017, 冰凍魚. 請尊重作者勞動成果，復制轉載保留本站鏈接!?應用開發筆記

轉載于:https://www.cnblogs.com/freeliver54/p/9728309.html

總結

以上是生活随笔為你收集整理的[转]Angular2 使用管道Pipe以及自定义管道格式数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。