Angular中PIPE的示例分析

这篇文章主要为大家展示了“Angular中PIPE的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Angular中PIPE的示例分析”这篇文章吧。

创新互联建站主营管城网站建设的网络公司,主营网站建设方案,成都app软件开发公司,管城h5成都微信小程序搭建,管城网站营销推广欢迎管城等地区企业咨询

在angular中，pipe（管道）可以用来对输入的数据进行处理，且不同的管道具有不同的作用。那么具体要怎么使用pipe（管道）？下面本篇文章就来带大家深入研究一下Angular中的PIPE（管道），看看它的使用方法。

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

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

【相关教程推荐：《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 }}
 

管道参数

管道可以接收任意数量的参数，使用方式是在管道名称后面添加:和参数值。如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;
        }
    }
}

使用

    
        {{errorMessage.error | formatError:"auth"}}