这篇文章主要给大家介绍了关于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>{{ 'Angular' | uppercase }}</p><p>{{ 'Angular' | up<span style="color:transparent">来源gaodai#ma#com搞*!代#%^码网</span>percase }}</p><!-- Output: ANGULAR --></div>
日期格式化
<div> <p>{{ today | date: 'shortTime' }}</p><p>{{ today | date: 'shortTime' }}</p><!-- Output: 以当前时间为准，输出格式：10:40 AM --></div>
数值格式化
<div> <p>{{ 3.14159265 | number: '1.4-4' }}</p><p>{{ 3.14159265 | number: '1.4-4' }}</p><!-- Output: 3.1416 --></div>
JavaScript 对象序列化
<div> <p>{{ { name: 'semlinker' } | json }}</p><p>{{ { name: 'semlinker' } | json }}</p><!-- Output: { "name": "semlinker" } --></div>
管道参数
管道可以接收任意数量的参数，使用方式是在管道名称后面添加:和参数值。如number: ‘1.4-4’，若需要传递多个参数则参数之间用冒号隔开，具体示例如下：
<div> <p>{{ 'semlinker' | slice:0:3 }}</p><p>{{ 'semlinker' | slice:0:3 }}</p><!-- Output: sem --></div>
管道链
<div> <p>{{ '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> <div class="message-box error mb-16"> {{errorMessage.error | formatError:"auth"}} </div></div>
总结
以上就是Angular管道PIPE的介绍与使用方法的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Angular管道PIPE的介绍与使用方法
转载请注明原文链接：Angular管道PIPE的介绍与使用方法
