Angular管道PIPE的介绍与使用方法 Angular管道PIPE的介绍与使用方法

前言
PIPE，翻译为管道。Angular 管道是编写可以在HTML组件中声明的显示值转换的方法。Angular 管道之前在 AngularJS 中被称为过滤器，从 Angular 2开始就被称为管道。管道将数据作为输入并将其转换为所需的输出。
Angular Pipes 将整数、字符串、数组和日期作为输入，用| 分隔，然后根据需要转换成格式，并在浏览器中显示出来。在插值表达式中，可以定义管道并根据情况使用它，在 Angular 应用程序中可以使用许多类型的管道。
内建管道

String -> String
- UpperCasePipe
- LowerCasePipe
- TitleCasePipe
Number -> String
- DecimalPipe
- PercentPipe
- CurrencyPipe
Object -> String
- JsonPipe
- DatePipe
Tools
- SlicePipe
- AsyncPipe
- I18nPluralPipe
- I18nSelectPipe

使用方法

大写转换

{{ 'Angular' | uppercase }}
{{ 'Angular' | uppercase }}

日期格式化

{{ today | date: 'shortTime' }}
{{ today | date: 'shortTime' }}

数值格式化

{{ 3.14159265 | number: '1.4-4' }}
{{ 3.14159265 | number: '1.4-4' }}

JavaScript 对象序列化

{{ { name: 'semlinker' } | json }}
{{ { name: 'semlinker' } | json }}

管道参数
【Angular管道PIPE的介绍与使用方法】管道可以接收任意数量的参数，使用方式是在管道名称后面添加:和参数值。如number: '1.4-4'，若需要传递多个参数则参数之间用冒号隔开，具体示例如下：

{{ 'semlinker' | slice:0:3 }}
{{ 'semlinker' | slice:0:3 }}

管道链

{{ 'semlinker' | slice:0:3 | uppercase }}
{{ 'semlinker' | slice:0:3 | uppercase }}

自定义管道
下面以过往项目中使用的管道为示例，讲解自定义管道步骤：

使用 @Pipe 装饰器定义 Pipe 的 metadata 信息，如 Pipe 的名称 - 即 name 属性
实现 PipeTransform 接口中定义的 transform 方法

定义

import { Pipe, PipeTransform } from "@angular/core"; @Pipe({ name: "formatError" })export class FormatErrorPipe implements PipeTransform {constructor() {}transform(value: any, module: string) {if (value.code) {return value.desc; } else {return value.message; }}}

使用