深入了解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

使用方法

大写转换

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>
    

完~

更多编程相关知识，请访问：编程教学！！

以上就是深入了解Angular中的PIPE（管道）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！