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> <div>时间：{{ time | date }}div>
管道可能接受任何数量的可选参数来对它的输出进行微调。 我们可以在管道名后面添加一个冒号( : )再跟一个参数值，来为管道添加参数(比如currency:’EUR’)。 如果我们的管道可以接受多个参数，那么就用冒号来分隔这些参数值(比如slice：1:5)。可以理解对管道进行参数化的意思是：传入某些参数，对转换结果进行限制性的格式化转换。
链式管道
//我们可以把管道链在一起，以组合出一些潜在的有用功能。时间：{{time | date:"fullDate"}}//将时间以fullDate类型输出时间：{{time | date:"fullDate" | uppercase}}//将时间以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>