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>