Angular中的管道「PIPE」-猿码集

1. 什么是管道

管道（Pipe）是Angular的一个重要特性，它用于将纯数据转换为需要显示的格式，相当于Vue.js中的过滤器(Filter)。利用管道，我们可以轻松地将数据进行格式化，如小数的精度、日期的格式、以及货币的符号等等，从而方便地满足各式各样的需求。在本篇文章中，我们将探讨Angular中的管道的基础知识。

2. 基础使用

2.1 简单示例

下面的例子演示了如何使用管道将字符串转换为大写字母：


// 将字符串转换为大写字母
{{ 'Hello World' | uppercase }}

在这个例子中，我们使用了 Angular 内置的管道，其中 | 符号表示数据流从左边的表达式（'Hello World'）流向管道（uppercase），并最终显示结果。

该表达式将会渲染成以下输出：

HELLO WORLD

2.2 自定义管道

除了内置管道，我们还可以自定义管道来实现更加个性化的数据转换。下面我们来看一个自定义管道的例子：


import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'multiply'})
export class MultiplyPipe implements PipeTransform {
  transform(value: number, multiplier: number): number {
    return value * multiplier;
  }
}

这是一个简单的乘法运算的自定义管道。在该管道中，我们在 @Pipe 注解中声明了管道的名称（multiply），并且定义了一个 transform 方法来进行数据转换。该方法将一个数字与一个倍数相乘，并返回结果：


{{ 10 | multiply: 2 }}

运行该表达式将会得到以下输出：

20

在上面的例子中，我们使用 | 符号将要进行数据转换的数字（10）和管道名称（multiply）隔开，然后通过冒号传递该管道所需要的额外参数（2），最终输出了一个数字。

3. 内置管道

3.1 常见的内置管道

下面是几种常见的内置管道，它们在我们的日常开发中都会用到：

DatePipe：用于将日期格式化为各种字符串格式。

DecimalPipe：用于格式化数字，确定小数点的位置，以及添加货币符号等。

UpperCasePipe / LowerCasePipe：将字符串转换为大写/小写形式。

3.2 DatePipe

下面是一个使用内置管道 DatePipe 的例子：


<!-- 将日期格式化为月/日/年 -->
{{ currentDate | date:'MM/dd/yyyy' }}

在上面的例子中，我们使用 | 符号将要进行格式化的日期和管道名称（date）隔开，并且使用冒号传递了一个格式化的字符串。该管道将会渲染为以下输出：

09/26/2021

3.3 DecimalPipe

DecimalPipe 在日常开发中经常用到，我们可以利用它来将数字在视图中显示为各种格式。


<!-- 将小数保留一位小数 -->
{{ 3.1415926 | number: '1.1-1' }}
<!-- 在数字前面添加货币符号 -->
{{ 100 | currency: 'USD' }}

第一个示例将输出数字 3.1。其中：前面的1表示数字的最少整数位数，后面的1表示保留的小数位数，最后的-1表示数字会四舍五入到最近的一个小数位，如果该位的值为零，则该位将被忽略。

第二个示例会在数字前面添加美元符号，并且保留默认的两位小数：

$100.00

4. 管道的链式调用

我们可以使用管道的链式调用将多个管道组合在一起，从而实现更复杂的数据转换。下面是一个实现将数字按照长度排序的例子:


import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'sortByLength'})
export class SortByLengthPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return value.sort((a: string, b: string) => a.length - b.length);
  }
}
<div *ngFor="let name of names | sortByLength | limitTo:10">{{ name }}</div>

在上述代码中，我们先定义了一个名为 sortByLength 的管道，并实现了它的 transform 方法。在 transform 方法中，我们将传入的字符串数组按照字符串长度进行排序，并最终返回排序后的数组。

然后，我们使用管道的链式调用将两个管道组合了起来。首先，我们将遍历随意的字符串数组并使用 sortByLength 管道对数组进行排序，接着使用 limitTo 管道来将数组的长度限制在 10 以内。最终输出结果为 10 个按照长度排序的字符串。

5. 管道的参数

管道有时需要接收自定义参数来更好地完成数据转换。这些参数可以通过在管道名称后面使用冒号来传递。下面是一个带参数的管道的例子：


import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'truncate' })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 25): string {
    return value.length > limit ? value.substring(0, limit) + '...' : value;
  }
}

在上述代码中，我们定义了一个名为 truncate 的管道，在 transform 方法中，我们对传入的字符串进行了判断，如果长度超过了指定的字符长度，我们将只显示该字符串的前面部分，并在字符串结尾添加一个省略号。该管道还有一个可选参数 limit，它定义了当字符串长度未超过 limit 的情况下将要返回的字符串。

下面是如何使用这个带参数的管道的例子：


<!-- 截取前5个字符 -->
{{ 'This is a long string' | truncate:5 }}

在上述代码中，我们使用管道的方式将一个字符串发送给我们的 truncate 管道，然后使用冒号指定参数（这里是 5），该管道将仅返回该字符串的前5个字符。

6. 总结

管道是 Angular 中一个非常重要的特性，在我们的日常开发中经常会用到。无论是内置管道还是自定义管道，都可以方便地进行数据的格式化和转换。当然，在使用管道时，我们还需要注意管道的链式调用以及管道参数的传递等问题。希望通过本篇文章的介绍，能让大家更加深入地了解 Angular 中的管道。

Angular中的管道「PIPE」