【Angular】 管道（Pipes）

Angular 管道（Pipes）是 Angular 提供的一种功能，主要用于在模板中对数据进行转换或格式化。管道是非常简洁且强大的工具，能够使数据的显示更符合用户需求。通过管道，我们可以在视图中展示经过转换的数据，而不需要修改组件的逻辑。

管道类似于 JavaScript 中的“过滤器”，它们通过 | 管道符在模板中进行使用。管道可以帮助你将数据转化为不同的格式，例如格式化日期、货币符号、字符串大小写等。

1. 管道的基本概念

管道是一个纯函数，它接收一个输入值，进行某种转换，然后返回一个新值。在 Angular 中，你可以使用内置管道，也可以自定义管道。

管道的语法

管道通常用于模板中，通过管道符 (|) 来应用：

{
  
  { expression | pipeName:pipeParam }}

• expression：要传递给管道的输入数据。
• pipeName：管道的名称（例如：date, uppercase, currency 等）。
• pipeParam：可选参数，用于配置管道的行为。

管道的执行流程

• Angular 会根据绑定的数据值自动触发管道的执行。
• 管道会根据提供的输入值和参数返回处理后的输出。

---

2. 内置管道

Angular 提供了一些常用的内置管道，帮助你在模板中进行常见的操作。下面是一些常见的内置管道：

2.1 date 管道

date 管道用于格式化日期时间。它接受一个日期对象，并将其转换为指定的格式。

{
  
  { today | date:'short' }}

在这里，today 是一个日期对象，short 是日期格式，它会将日期格式化为短日期和时间格式。你还可以使用其他格式，如：

• 'shortDate'：仅显示日期。
• 'shortTime'：仅显示时间。
• 'medium'：显示完整日期和时间。
• 'long'：更长的日期时间格式。
• 'fullDate'：完整的日期显示。

2.2 currency 管道

currency 管道用于将数字格式化为货币格式。

{
  
  { amount | currency:'USD':true:'1.2-2' }}

• 'USD'：指定货币单位。
• true：显示货币符号（true 表示显示符号，false 表示不显示符号）。
• '1.2-2'：指定数字的小数位数范围（例如：1.2-2 表示最小保留 2 位小数，最大保留 2 位小数）。

2.3 uppercase 和 lowercase 管道

uppercase 和 lowercase 管道用于将字符串转换为大写或小写。

<p>{
  
  { 'hello world' | uppercase }}</p> <!-- 输出: HELLO WORLD -->