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>