Angular的管道

Angular的管道能夠看做成是一個數據格式化展現的工具。管道能夠將數據格式化顯示，而不改變源數據。獲取數據可能簡單到建立一個局部變量就行，也可能複雜到從WebSocket中獲取數據流。一旦取到數據，咱們能夠把它們原始值的toString結果直接推入視圖中。 但這種作法不多能具有良好的用戶體驗。 好比，幾乎每一個人都更喜歡簡單的日期格式，例如1988-04-15，而不是系統或服務端傳過來的原始字符串格式 —— Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time)。咱們能夠經過管道來將這個日期格式轉換在渲染到視圖中
管道把數據做爲輸入，而後轉換它，給出指望的輸出。
管道(Pipe)能夠根據開發者的意願將數據格式化。

內置管道

ts文件

export class EditTheDeclarationComponent implements OnInit {
    public time=new Date() //獲取本地當前時間
    }

 

 

<div>時間：{{ time | date:"MM/dd/yy" }}</div>
<!--10/30/19-->
<div>時間：{{ time | date }}</div>
<!--Oct 30, 2019-->

 

管道可能接受任何數量的可選參數來對它的輸出進行微調。 咱們能夠在管道名後面添加一個冒號( : )再跟一個參數值，來爲管道添加參數(好比currency:’EUR’)。 若是咱們的管道能夠接受多個參數，那麼就用冒號來分隔這些參數值(好比slice：1:5)。能夠理解對管道進行參數化的意思是：傳入某些參數，對轉換結果進行限制性的格式化轉換。

鏈式管道

//咱們能夠把管道鏈在一塊兒，以組合出一些潛在的有用功能。
<div>時間：{{time | date:"fullDate"}}</div>
<!--Wednesday, October 30, 2019-->  //將時間以fullDate類型輸出
<div>時間：{{time | date:"fullDate" | uppercase}}</div>
<!--WEDNESDAY, OCTOBER 30, 2019-->  //將時間以fullDate類型輸出 並轉化爲大寫字母

 

 

經常使用的內置管道

管道	類型	功能
DatePipe	純管道	日期格式化
JsonPipe	非純管道	使用JSON.stringify()將對象轉成json字符串
UpperCasePipe	純管道	將文本中的字母所有轉在大寫
LowerCasePipe	純管道	將文本中的字母所有轉成小寫
TitleCasePipe		將文本轉換成標題格式
DecimalPipe	純管道	數值格式化
CurrencyPipe	純管道	貨幣格式化
PercentPipe	純管道	百分比格式化
SlicePipe	非純管道	數組或字符串取切割
I18nPluralPipe		根據expression的值匹配mapping中的值，並將匹配以後的值展現出來
I18nSelectPipe		根據expression匹配mapping中的值，而且返回|匹配以後的值

自定義管道

在Angular中咱們可使用下面命令來快速建立一個管道

新建管道：ng generate pipe pipes/string-pi

 

在建立的管道ts中

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'idNumber' })

export class StringPiPipe implements PipeTransform {
  //管道所要執行的事件  這個管道是身份證號的中間部分隱藏
  //例如{{Name | 管道}} value指的是Name值
  transform(value): any {  
    //idCard 將你value傳過來的值進行正則修改 以後再返回idCard    
    let idCard = value.replace(/(^\d{6}|\d{3})(\d{10})(\d{1})(\d{1}|X$)/, "$1**********$3$4");
    return idCard;  
} 
}

 

 

而後在你須要的地方的 xxxx.module.ts中引入；

import { StringPiPipe } from './pipes/string-pi.pipe';

 

並在@NgModule的 declarations中聲明；

@NgModule({
  declarations: [
    AppComponent,
    StringPiPipe, //這一行-----------
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

 

 

OK，如今你能夠在HTML文件中用了，

<div class="idcard">{{order.idNumber | idNumber }}</div>