【Angular】管道（Pipes）

cangloe

于 2024-11-27 19:03:24 发布

阅读量680

点赞数 13

分类专栏： angular 文章标签： angular.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/u013675821/article/details/144092230

版权

angular 专栏收录该内容

14 篇文章

订阅专栏

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 -->
<p>{{ 'HELLO WORLD' | lowercase }}</p> <!-- 输出: hello world -->

2.4 `json` 管道

json 管道用于将对象转换为 JSON 字符串，以便于查看调试。

<p>{{ object | json }}</p>

如果 object 是一个对象，json 管道会将其转换为 JSON 格式的字符串。

2.5 `percent` 管道

percent 管道用于将数字格式化为百分比。

<p>{{ 0.25 | percent }}</p> <!-- 输出: 25% -->

它会将数值乘以 100，并添加百分号。

2.6 `slice` 管道

slice 管道用于从字符串或数组中截取部分内容。

<p>{{ 'Hello World' | slice:0:5 }}</p> <!-- 输出: Hello -->

0:5：截取从第 0 位到第 5 位的字符。

2.7 `async` 管道

async 管道用于处理异步数据（如 Promise 或 Observable）。它可以自动订阅并返回数据。

<p>{{ asyncData | async }}</p>

asyncData 是一个 Observable 或 Promise，async 管道会自动订阅并显示异步数据。

3. 自定义管道

Angular 允许你创建自定义管道，以便执行特定的数据转换操作。你可以通过实现 PipeTransform 接口来定义自己的管道。

3.1 创建自定义管道

自定义管道必须使用 @Pipe 装饰器来进行定义，并且需要实现 PipeTransform 接口，该接口包含 transform 方法。

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

@Pipe({
  name: 'reverse' // 自定义管道的名称
})
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return '';
    return value.split('').reverse().join('');
  }
}

在这个例子中，reverse 管道将输入的字符串进行反转。

3.2 使用自定义管道

一旦自定义管道被定义，你可以在模板中像使用内置管道一样使用它。

<p>{{ 'hello' | reverse }}</p> <!-- 输出: olleh -->

3.3 管道参数

自定义管道也可以接受参数，这些参数会传递给 transform 方法。

@Pipe({
  name: 'greet'
})
export class GreetPipe implements PipeTransform {
  transform(value: string, greeting: string): string {
    return `${greeting}, ${value}!`;
  }
}

使用管道：

<p>{{ 'World' | greet:'Hello' }}</p> <!-- 输出: Hello, World! -->

3.4 管道的性能优化

管道的默认行为是每当检测到数据变化时都会重新计算。如果数据没有变化，Angular 仍会重新计算，这可能会影响性能。为了避免这种情况，Angular 提供了 纯管道 和 非纯管道 的区别：

纯管道：只在输入数据发生变化时执行一次计算。
非纯管道：每次变更检测时都会执行计算（即使输入数据没有变化）。

纯管道是默认的，你可以通过将管道的 pure 属性设置为 false 来创建非纯管道。

@Pipe({
  name: 'nonPurePipe',
  pure: false
})
export class NonPurePipe implements PipeTransform {
  transform(value: any): any {
    return value; // 每次都执行
  }
}