Angular管道PIPE介绍

【这是我参与更文挑战的第 21 天，活动详情查看：更文挑战 ”】

PIPE ，翻译为管道。 Angular 管道是编写可以在HTML组件中声明的显示值转换的方法。 Angular 管道之前在 AngularJS 中被称为过滤器，从 Angular 2 开始就被称为管道。管道将数据作为输入并将其转换为所需的输出。

Angular Pipes 将整数、字符串、数组和日期作为输入，用 | 分隔，然后根据需要转换成格式，并在浏览器中显示出来。在插值表达式中，可以定义管道并根据情况使用它，在 Angular 应用程序中可以使用许多类型的管道。

String -> String

UpperCasePipe

LowerCasePipe

TitleCasePipe

< p ngNonBindable > {{ 'Angular' | uppercase }} </ p > < p > {{ 'Angular' | uppercase }} </ p >  </ div >

日期格式化

< p ngNonBindable > {{ today | date: 'shortTime' }} </ p > < p > {{ today | date: 'shortTime' }} </ p >  </ div >

数值格式化

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

JavaScript 对象序列化

< p ngNonBindable > {{ { name: 'semlinker' } | json }} </ p > < p > {{ { name: 'semlinker' } | json }} </ p >  </ div >

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

< p ngNonBindable > {{ 'semlinker' | slice:0:3 }} </ p > < p > {{ 'semlinker' | slice:0:3 }} </ p >  </ 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>
        全栈开发 @ DevPoint
        1145.3k