用管道转换数据

管道用来对字符串、货币金额、日期和其他显示数据进行转换和格式化。管道是一些简单的函数，可以在模板表达式中用来接受输入值并返回一个转换后的值。例如，你可以使用一个管道把日期显示为 1988 年 4 月 15 日，而不是其原始字符串格式。

Angular 为典型的数据转换提供了内置的管道，包括国际化的转换（i18n），它使用本地化信息来格式化数据。数据格式化常用的内置管道如下：

• DatePipe：根据本地环境中的规则格式化日期值。
• UpperCasePipe：把文本全部转换成大写。
• LowerCasePipe ：把文本全部转换成小写。
• CurrencyPipe ：把数字转换成货币字符串，根据本地环境中的规则进行格式化。
• DecimalPipe：把数字转换成带小数点的字符串，根据本地环境中的规则进行格式化。
• PercentPipe ：把数字转换成百分比字符串，根据本地环境中的规则进行格式化。

在模板中使用管道

要应用管道，请如下所示在模板表达式中使用管道操作符（|），紧接着是该管道的名字，对于内置的 DatePipe 它的名字是 date 。

使用参数和管道链来格式化数据

可以用可选参数微调管道的输出。例如，你可以使用 CurrencyPipe 和国家代码（如 EUR）作为参数。模板表达式 {{ amount | currency:'EUR' }} 会把 amount 转换成欧元。紧跟在管道名称（ currency ）后面的是冒号（:）和参数值（'EUR'）。

如果管道能接受多个参数，就用冒号分隔这些值。例如，{{ amount | currency:'EUR':'Euros '}} 会把第二个参数（字符串 'Euros '）添加到输出字符串中。你可以使用任何有效的模板表达式作为参数，比如字符串字面量或组件的属性。

有些管道需要至少一个参数，并且允许使用更多的可选参数，比如 SlicePipe 。例如， {{ slice:1:5 }} 会创建一个新数组或字符串，它以第 1 个元素开头，并以第 5 个元素结尾。

范例：格式化日期

下面的例子显示了两种不同格式（'shortDate' 和 'fullDate'）之间的切换：

• 该 app.component.html 模板使用 DatePipe （名为 date）的格式参数把日期显示为 04/15/88 。
• hero-birthday2.component.ts 组件把该管道的 format 参数绑定到 template 中组件的 format 属性，并添加了一个按钮，其 click 事件绑定到了该组件的 toggleFormat() 方法。
• hero-birthday2.component.ts 组件的 toggleFormat() 方法会在短格式（'shortDate'）和长格式（'fullDate'）之间切换该组件的 format 属性。

范例：通过串联管道应用两种格式

可以对管道进行串联，以便一个管道的输出成为下一个管道的输入。

在下面的范例中，串联管道首先将格式应用于一个日期值，然后将格式化之后的日期转换为大写字符。 src/app/app.component.html 模板的第一个标签页把 DatePipe 和 UpperCasePipe 的串联起来，将其显示为 APR 15, 1988。src/app/app.component.html 模板的第二个标签页在串联 uppercase 之前，还把 fullDate 参数传给了 date，将其显示为 FRIDAY, APRIL 15, 1988。

The chained hero's birthday is
{{ birthday | date | uppercase}}

The chained hero's birthday is
{{  birthday | date:'fullDate' | uppercase}}