Angular中的管道为您提供了一种直接在模板中转换数据的简单方法。你可以创建自己的自定义管道，你也可以使用以下任何一个，它们是CommonModule的一部分，开箱即用：

<$>[注]这篇文章涵盖了角度2及以上<$>

异步

异步管道自动订阅可观察到的或承诺的内容，并在传入时返回发出的值：

1<ul>
2  <li *ngFor="let item of data | async">
3    {{ item.name }}
4  </li>
5</ul>

币种

货币管道允许以不同货币格式化数字：

1{{ price | currency:'CAD' }}
2{{ price | currency:'USD':true }}
3{{ price | currency:'EUR':false:3.2-2 }}

• 第一个参数是带有本地货币代码的字符串。
• 第二个可能的参数是显示将显示货币符号或货币代码的布尔值。默认值为FALSE，并显示货币代码。
• 第三种可能是十进制管道格式的字符串，用于格式化数字。

Date

使用日期管道设置日期值的格式：

1{{ someDate | date:'medium' }}
2{{ someDate | date:'fullDate' }}
3{{ someDate | date:'yy' }}
4{{ someDate | date:'Hm' }}

您可以使用许多符号来定义自定义格式，也可以使用许多预定义的关键字。可用的关键字如下：'medium'、'short'、' fullDate '、' longDate '、' mediumDate '、' shortDate '、'mediumTime'和' shortTime '。

符号列表请参考官方reference接口。

小数

小数管道格式化十进制值：

1{{ decimalValue | number:'4.3-5' }}

在上面的例子（'4.3 - 5')中，4是整数位的最小数目，3是分数位的最小数目，5是分数位的最大数目。

Json

Json管道对调试很有用，它将对象显示为Json字符串。它在幕后使用JSON.stringify：

1{{ someObject | json }}

小写和大写

使用相应的竖线将文本转换为小写或大写：

1{{ user.name | uppercase }}
2{{ user.name | lowercase }}

百分比

Percent管道将数字转换为它的百分比值：

1{{ decimalValue | percent }}
2{{ decimalValue | percent:'3.2-3' }}

可选参数是Decliter管道格式的字符串。

Slice

使用切片管道创建子集列表或字符串：

1{{ someText | slice:3:6 }}
2<ul>
3  <li *ngFor="let item of someList | slice:2">
4    {{ item }}
5  </li>
6</ul>

参数是起始索引和结束索引。结束索引可以省略，结果列表或字符串将包含从开始索引到结束的所有内容。

目前还有两个内置管道处于试验阶段：I18nPlural和I18nSelect.👉