本文摘自PHP中文网,作者青灯夜游,侵删。
在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
Tools
SlicePipe
AsyncPipe
I18nPluralPipe
I18nSelectPipe
使用方法
大写转换
1 2 3 4 | <div>
<p ngNonBindable>{{ 'Angular' | uppercase }}</p>
<p>{{ 'Angular' | uppercase }}</p> <!-- Output: ANGULAR -->
</div>
|
日期格式化
1 2 3 4 | <div>
<p ngNonBindable>{{ today | date : 'shortTime' }}</p>
<p>{{ today | date : 'shortTime' }}</p> <!-- Output: 以当前时间为准,输出格式:10:40 AM -->
</div>
|
数值格式化
1 2 3 4 | <div>
<p ngNonBindable>{{ 3.14159265 | number: '1.4-4' }}</p>
<p>{{ 3.14159265 | number: '1.4-4' }}</p> <!-- Output: 3.1416 -->
</div>
|
JavaScript 对象序列化
1 2 3 4 | <div>
<p ngNonBindable>{{ { name: 'semlinker' } | json }}</p>
<p>{{ { name: 'semlinker' } | json }}</p> <!-- Output: { "name" : "semlinker" } -->
</div>
|
管道参数
管道可以接收任意数量的参数,使用方式是在管道名称后面添加:
和参数值。如number: '1.4-4'
,若需要传递多个参数则参数之间用冒号隔开,具体示例如下:
1 2 3 4 | <div>
<p ngNonBindable>{{ 'semlinker' | slice:0:3 }}</p>
<p>{{ 'semlinker' | slice:0:3 }}</p> <!-- Output: sem -->
</div>
|
管道链
可以将多个管道连接在一起,组成管道链对数据进行处理。
1 2 3 4 | <div>
<p ngNonBindable>{{ 'semlinker' | slice:0:3 | uppercase }}</p>
<p>{{ 'semlinker' | slice:0:3 | uppercase }}</p>
</div>
|
自定义管道
下面以过往项目中使用的管道为示例,讲解自定义管道步骤:
定义
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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;
}
}
}
|
使用
1 2 3 4 5 | <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(管道)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
浅谈Angular中的component/service
如何利用管道提高Angular应用程序的性能?
Angular开发者必须学习的19件事
详解Angular中自定义创建指令的方法
了解Angular中的变化检测(change detection)机制
Angular中关于单元测试的面试题,你能回答上来吗?
详解Angular中的route路由
Angular中的firebase身份验证(代码示例)
分享Angular中关于表单的一些知识点
Angular7中如何引用ng zorro antd?
更多相关阅读请进入《Angular》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 深入了解Angular中的PIPE(管道)