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>