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>