angular定义一个管道(Angular管道PIPE的介绍与使用方法)
类别:编程学习 浏览量:1238
时间:2021-10-30 10:28:34 angular定义一个管道
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
使用方法
大写转换
<li> <p ngNonBindable>{{ 'Angular' | uppercase }}</p> <p>{{ 'Angular' | uppercase }}</p> <!-- Output: ANGULAR --> </li>
日期格式化
<li> <p ngNonBindable>{{ today | date: 'shortTime' }}</p> <p>{{ today | date: 'shortTime' }}</p> <!-- Output: 以当前时间为准,输出格式:10:40 AM --> </li>
数值格式化
<li> <p ngNonBindable>{{ 3.14159265 | number: '1.4-4' }}</p> <p>{{ 3.14159265 | number: '1.4-4' }}</p> <!-- Output: 3.1416 --> </li>
JavaScript 对象序列化
<li> <p ngNonBindable>{{ { name: 'semlinker' } | json }}</p> <p>{{ { name: 'semlinker' } | json }}</p> <!-- Output: { "name": "semlinker" } --> </li>
管道参数
管道可以接收任意数量的参数,使用方式是在管道名称后面添加:和参数值。如number: '1.4-4',若需要传递多个参数则参数之间用冒号隔开,具体示例如下:
<li> <p ngNonBindable>{{ 'semlinker' | slice:0:3 }}</p> <p>{{ 'semlinker' | slice:0:3 }}</p> <!-- Output: sem --> </li>
管道链
<li> <p ngNonBindable>{{ 'semlinker' | slice:0:3 | uppercase }}</p> <p>{{ 'semlinker' | slice:0:3 | uppercase }}</p> </li>
自定义管道
下面以过往项目中使用的管道为示例,讲解自定义管道步骤:
- 使用 @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; } } }
使用
<li *ngIf="errorMessage"> <li class="message-box error mb-16" [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}"> {{errorMessage.error | formatError:"auth"}} </li> </li>
总结
到此这篇关于Angular管道PIPE的文章就介绍到这了,更多相关Angular管道PIPE内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- angular路由树(详解Angular路由之子路由)
- angular封装公共组件(详解Angular组件之生命周期二)
- angularjs使用指令(详解Angular路由动画及高阶动画函数)
- angular开发详解(详解Angular动态组件)
- angular封装进度条组件(如何用DevUI搭建自己的Angular组件库)
- angular快速创建模块指令(详解Angular项目中共享模块的实现)
- angularjs数据绑定类指令及作用(详解Angular数据绑定及其实现方式)
- angular教程第九讲(浅谈Angular的12个经典问题)
- angularjs过滤器
- vue react和angular(详解React Angular Vue三大前端技术)
- angular使用方法(Angular环境搭建及简单体验小结)
- angular简单介绍(详解Angular依赖注入)
- angular兄弟组件调用方法(Angular封装WangEditor富文本组件的方法)
- angular 常用模块(详解Angular之路由基础)
- angular组件化(详解Angular父子组件通讯)
- angular怎么把组件用在根组件里(详解Angular组件之投影)
- 为什么越来越多年轻人回农村(为什么越来越多年轻人回农村生活)
- 怎么快速学好英语(怎么快速学好英语初中)
- 中国留学生都是富二代吗()
- 我们现在吃的苹果是哪里来的 原来现代苹果引入中国仅有一百多年(我们现在吃的苹果是哪里来的)
- 买绿宝不能只挑黄绿色 菜农教你3招挑,个个皮薄肉脆,香甜爆汁(买绿宝不能只挑黄绿色)
- 大果肉搭配薄瓜皮, 绿宝 脆甜爽口,不愧是甜瓜中的 佼佼者(大果肉搭配薄瓜皮)
热门推荐
- mysql类型转换函数推荐(mysql 数据类型转换的实现)
- php开发api接口登录(PHP调用接口API封装的例子)
- 安装mysql中要注意什么问题(安装Mysql时可能会遇到的一些疑难杂症)
- 云服务器传统服务器配置(云服务器、高防服务器的不同之处体现在哪里?)
- 怎么用docker中的mysql连接数据库(连接docker里面的mysql失败解决方法)
- python飞机大战游戏背景(python实现飞机大战游戏)
- css弹出框特效(利用CSS实现酷炫的下拉框特效)
- sql server内外连接的作用(浅谈SQL Server交叉联接 内部联接)
- 详解JS中你不知道的各种循环测速(详解JS中你不知道的各种循环测速)
- TypeScript定义接口(interface)案例教程(TypeScript定义接口interface案例教程)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9