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

使用方法

大写转换

<div>
  <p ngNonBindable>{{ \'Angular\' | uppercase }}</p>
  <p>{{ \'Angular\' | uppercase }}</p> <!-- Output: ANGULAR -->
</div>

日期格式化

<div>
  <p ngNonBindable>{{ today | date: \'shortTime\' }}</p>
  <p>{{ today | date: \'shortTime\' }}</p> <!-- Output: 以当前时间为准，输出格式：10:40 AM -->
</div>

数值格式化

<div>
  <p ngNonBindable>{{ 3.14159265 | number: \'1.4-4\' }}</p>
  <p>{{ 3.14159265 | number: \'1.4-4\' }}</p> <!-- Output: 3.1416 -->
</div>

JavaScript 对象序列化

<div>
  <p ngNonBindable>{{ { name: \'semlinker\' } | json }}</p>
  <p>{{ { name: \'semlinker\' } | json }}</p> <!-- Output: { \"name\": \"semlinker\" } -->
</div>

管道参数

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

<div>
  <p ngNonBindable>{{ \'semlinker\' | slice:0:3 }}</p>
  <p>{{ \'semlinker\' | slice:0:3 }}</p> <!-- Output: sem -->
</div>

管道链

<div>
  <p ngNonBindable>{{ \'semlinker\' | slice:0:3 | uppercase }}</p>
  <p>{{ \'semlinker\' | slice:0:3 | uppercase }}</p>
</div>

自定义管道

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

使用 @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;
        }
    }
}

使用

<div *ngIf=\"errorMessage\">
    <div class=\"message-box error mb-16\" [@animate]=\"{value:\'*\',params:{opacity:\'0\',duration:\'200ms\'}}\">
        {{errorMessage.error | formatError:\"auth\"}}
    </div>
</div>

总结