通常我们需要使用管道实现对数据的格式化，下面这篇文章主要给大家介绍了关于angular中管道操作符(|)的使用方法，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
管道是什么？
Angular的管道可以看作成是一个数据格式化展示的工具。管道可以将数据格式化显示，而不改变源数据。比如关于日期的展示，对于源数据使用管道1可以以yyyy/MM/dd来展示，也可以使用管道2展示成Feb 28, 2017的形式。但原数据依然是date，并没有改变。利用管道我们可以将数据格式化的内容剥离出来，使之独立，有需要格式化展示的时候选择相应的管道进行处理即可。
一、模板表达式操作符
模板表达式语言使用了JavaScript 语法的子集，并补充了几个用于特定场景的特殊操作符：管道操作符、安全导航操作符。
二、管道操作符 (|)
在绑定之前，表达式的结果可能需要一些转换。例如，可能希望吧数字显示成金额、强制文本变成大写，或者过滤列表以及进行排序。
Angular 管道对象这样的小型转换来说是个很方便的选择。
管道是一个简单的函数，它接受一个输入值，并返回转换结果。
Angular 的常用内置管道函数：
DatePipe，UpperCasePipe，LowerCasePipe，CurrencyPipi，PercentPipe，JsonPipe等。
它们用于模板表达式中，只要使用管道操作符(|) 就行了。
使用方法
管道操作符会把它左侧的表达式结果传给它右侧的管道函数。还可以通过多个管道串联表达式。
<p>
Title through a pipe chain:
{{title | uppercase | lowercase}}
</p>常用实例：
<p class="alert alert-warning">
<p>{{title|uppercase }}</p>
<p>{{title|uppercase|lowercase }}</p>
<p>{{this|json}}</p>
<p>{{time|date:'yyyy-MM-dd'}}</p>
<p>{{number|percent}}</p>
<p>{{number|currency:'CNY'}}</p>
</p>ts 属性：
export class AppComponent {
title = 'app';
name = '张三丰';
time = new Date();
number = 1.123;
show(str: string) {
str += '---测试';
return str;
}
}显示结果：
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
