Angular 的管道 (Pipes) 是什么？

推荐答案

Angular 的管道 (Pipes) 是一种用于在模板中转换数据的工具。它们通常用于格式化显示的数据，例如日期、货币、百分比等。管道可以在模板中使用 | 符号来调用，并且可以链式调用多个管道。

示例

<p>{{ today | date:'fullDate' }}</p>
<p>{{ price | currency:'USD':true }}</p>
<p>{{ score | percent }}</p>

本题详细解读

什么是管道？

管道是 Angular 提供的一种机制，用于在模板中对数据进行转换和格式化。它们可以接受输入数据并返回转换后的输出数据。管道的主要目的是简化模板中的逻辑，使模板更加简洁和易读。

内置管道

Angular 提供了一些内置的管道，例如：

• DatePipe：用于格式化日期。
• UpperCasePipe 和 LowerCasePipe：用于将字符串转换为大写或小写。
• CurrencyPipe：用于格式化货币。
• PercentPipe：用于格式化百分比。
• JsonPipe：用于将对象转换为 JSON 字符串。

自定义管道

除了使用内置管道，开发者还可以创建自定义管道来满足特定的需求。自定义管道需要实现 PipeTransform 接口，并定义一个 transform 方法。

示例：自定义管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'reverse' })
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

在模板中使用自定义管道：

<p>{{ 'hello' | reverse }}</p>

管道的链式调用

管道可以链式调用，即一个管道的输出可以作为另一个管道的输入。

<p>{{ today | date:'fullDate' | uppercase }}</p>

管道的纯与非纯

管道默认是纯的（pure），这意味着 Angular 只有在检测到输入值发生变化时才会重新调用管道。如果管道是非纯的（impure），则 Angular 会在每个变更检测周期中调用管道，即使输入值没有变化。

// www.javascriptcn.com code example
@Pipe({
  name: 'impurePipe',
  pure: false
})
export class ImpurePipe implements PipeTransform {
  transform(value: any): any {
    // 转换逻辑
  }
}

总结

管道是 Angular 中非常强大的工具，能够帮助开发者在模板中轻松地转换和格式化数据。通过内置管道和自定义管道，开发者可以灵活地处理各种数据展示需求。