在 Angular 应用程序中，我们经常需要对数据进行转换和格式化，例如在显示日期或货币金额时。为了实现这些功能，Angular 借助了管道（Pipe）这一概念，并提供了多种内置的管道供我们使用。
本文将介绍 Angular 中使用管道进行数据转换和格式化的方法，涉及管道的基本使用、自定义管道和几个内置管道的实例应用。
基本使用
在 Angular 中使用管道，需要在模板中通过带有管道名称和参数的语法来调用它。
以下是使用 date 管道格式化日期的示例代码：
<p>{{ today | date }}</p>其中，today 是一个 Date 类型的变量，我们通过管道将其进行格式化后显示。当然，我们也可以通过参数来指定格式，例如：
<p>{{ today | date:'yyyy/MM/dd' }}</p>上述代码会将日期格式化为 2022/09/27 的形式。
除了内置的 date 管道，Angular 还提供了许多其他的管道，例如 uppercase、lowercase、currency 等。它们都属于 @angular/common 模块，我们需要在模块中引入后才能使用。
自定义管道
除了使用内置管道，我们还可以通过创建自定义管道来实现数据转换和格式化功能。以下是创建一个简单的自定义管道的示例代码：
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'fahrenheit2Celsius' })
export class Fahrenheit2CelsiusPipe implements PipeTransform {
transform(value: number): number {
return ((value - 32) * 5) / 9;
}
}该管道名为 fahrenheit2Celsius，用于将华氏度转换为摄氏度。我们通过 PipeTransform 接口来实现管道的转换方法 transform。
在使用自定义管道时，只需要像使用内置管道一样在模板中进行调用：
<p>{{ 32 | fahrenheit2Celsius }}</p>上述代码会将 32 华氏度转换为 0 摄氏度。
内置管道应用实例
uppercase / lowercase
在将一些字符串进行显示时，有时候需要将它们全部转换为大写或小写。这时我们可以使用内置的 uppercase 和 lowercase 管道。
<p>{{ 'Hello, World!' | uppercase }}</p>
<p>{{ 'Hello, World!' | lowercase }}</p>上述代码会将字符串全部转换为大写或小写形式输出。
currency
在显示货币金额时，我们可以使用 currency 管道对数值进行格式化。
<p>{{ 123 | currency:'USD':'symbol' }}</p>
<p>{{ 456 | currency:'EUR':'symbol':'3.2-2' }}</p>上述代码会将 123 格式化为 $123.00，将 456 格式化为 €456.00。
这里 currency 管道的第一个参数是货币代码（例如 USD、EUR 等），第二个参数是货币符号的显示方式（symbol：显示符号，code：显示代码，symbol-narrow：显示较小符号），第三个参数是格式字符串，用于控制小数点和精度等。
date
在对日期进行格式化时，我们可以使用 date 管道。
<p>{{ today | date:'yyyy/MM/dd' }}</p>上述代码会将 today 格式化为 2022/09/27 的形式。
percent
在对百分比进行格式化时，我们可以使用 percent 管道。
<p>{{ 0.123 | percent }}</p>
<p>{{ 0.456 | percent:'2.2-2' }}</p>上述代码会将 0.123 格式化为 12%，将 0.456 格式化为 45.60%。
这里 percent 管道的第一个参数是格式字符串，用于控制小数点和精度等。
总结
本文主要介绍了 Angular 中使用管道进行数据转换和格式化的方法，包括管道的基本使用、自定义管道和几个内置管道的实例应用。通过管道的使用，我们可以轻松地实现各种数据的转换和格式化，从而优化我们的前端应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482a34e48841e98942053f3
