这篇文章主要为大家展示了“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' }}
{{ { 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"}}
以上是“Angular中PIPE的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!