关于angularjs: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>

完