Angular 7 管道

在 Angular 中，管道是用于转换绑定值的方法，可以将数据从一种格式转换为另一种格式。Angular 7 的管道提供了许多内置的管道，同时还可以自定义管道来满足应用程序的特定需求。

内置管道

Date

Date 管道可以将日期对象转换为不同的格式，例如月/日/年，小时:分钟等等。以下是一些可用的日期格式：

• short: 月/日/年，例如：6/15/2018。
• medium: 月/日/年小时:分钟，例如：6/15/2018，3:45 PM。
• long: 月名称 day，year，例如：June 15, 2018。
• full: 星期几，月名称 day，year 时间，例如：Friday, June 15, 2018 at 3:45:25 PM GMT+08:00。

以下是如何在模板中使用 Date 管道：

<p>The current date is {{ currentDate | date:'medium' }}</p>

Currency

Currency 管道用于格式化货币值。默认使用当前地区的货币符号和货币格式。可以使用参数来更改货币符号、小数位等。

以下是一个使用 Currency 管道的例子：

<p>Price: {{ price | currency:'USD':'symbol' }}</p>

Percent

Percent 管道用于将数字转换为百分比格式。

以下是 Percent 管道的使用示例：

<p>Total progress: {{ progress | percent }}</p>

Uppercase

Uppercase 管道用于将字符串转换为大写。

以下是 Uppercase 管道的使用示例：

<p>{{ 'hello world' | uppercase }}</p>

自定义管道

可以通过创建自定义管道来实现满足特定需求的数据转换。

以下是创建自定义管道的步骤：

1. 创建一个类并实现 PipeTransform 接口。
2. 在类上使用 @Pipe 装饰器，并指定管道名称。
3. 在 transform 方法中实现数据转换逻辑。

以下是一个将数字转换为星号的自定义管道示例：

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

@Pipe({
  name: 'star'
})
export class StarPipe implements PipeTransform {
  transform(value: number): string {
    let starString = '';
    for(let i = 0; i < value; i++) {
      starString += '*';
    }
    return starString;
  }
}

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

<p>Stars: {{ numStars | star }}</p>

总结

管道是 Angular 中非常有用的特性，能够让开发者轻松地将数据进行格式化和转换。内置的管道可以满足大多数需求，同时也可以通过创建自定义管道来实现特定的数据转换。