Angular 关于pipe
时间:2022-06-19
本文章向大家介绍Angular 关于pipe,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Angular 中的管道其实就是angularjs中的过滤器,用来转换数据然后显示给用户。 要创建一个管道,必须实现 PipeTransform 接口。这个接口非常简单,只需要实现transform方法即可。 使用管道的几个注意事项:
- 管道可以链式使用,还可以传参
{{date | date: 'fullDate' | uppercase}}
- 管道分两种 纯(pure)管道与非纯(impure)管道 默认是pure的。 Angular 只有在它检测到输入值发生了纯变更时才会执行纯管道。 纯变更是指对原始类型值(String、Number、Boolean、Symbol)的更改, 或者对对象引用(Date、Array、Function、Object)的更改。 使用 impure 管道时候要小心,很可能触发非常频繁。
- 也是出于性能的考虑。Angular并没有提供 angularjs 自带的 Filter 和 OrderBy 过滤器,Angular官方推荐把过滤和排序放到组件中实现,比如对外提供
filteredHeroes
或sortedHeroes
属性
源码解析
json管道
/node_modules/@angular/common/esm5/src/pipes/json_pipe.js
非常简单,就一行话。
JsonPipe.prototype.transform = function (value) { return JSON.stringify(value, null, 2); };
async管道
这个是Angular特有的管道,可以多使用 其实会处理两种对象类型,Observable或Promise,如果是Observable会执行subscription方法,如果是Promise会调用then方法。如果是Observable当组件销毁时执行unsubscribe方法取消订阅。 node_modules/@angular/common/esm5/src/pipes/async_pipe.js:11
参考
https://segmentfault.com/a/1190000008759314
- 如何定位Obj-C野指针随机Crash(二):让非必现Crash变成必现
- 六种开发环境部署大全:基于Openshift
- 手把手教你由TensorFlow上手PyTorch(附代码)
- 如何定位Obj-C野指针随机Crash(三):如何让Crash自报家门
- 【MIG专项测试组】腾讯手机管家实战分析:内存突增是为神马?
- 全系统栈崩溃是什么鬼?手机管家高级工程师 jaylin,教你如何抓鬼!
- 【团队分享】苍翼之刃:论File Descriptor泄漏如何导致Crash?
- 【沙龙干货分享】你要知道的N个Android适配问题
- 优化安卓应用内存的神秘方法以及背后的原理,一般人我不告诉他
- 安全快速下载Xcode的姿势
- Android之实现妙趣横生的粘连布局
- 萝莉有话说:你的App真正适配了iOS 9吗?
- H5 缓存机制浅析 移动端 Web 加载性能优化
- Android 开发必备知识:我和 Gradle 有个约会
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python数据库编程。
- ggplot2饼图和图注顺序不一致如何解决
- 基因集富集分析(Gene Set Enrichment Analysis, GSEA)
- R绘制甲基化和表达谱联合分析热图
- Python字符串操作--寻找所有匹配的位置
- java设计模式-工厂模式
- java设计模式-工厂方法模式
- java设计模式-抽象工厂模式
- Prometheus监控神器-Alertmanager篇(1)
- java设计模式-单例模式
- Spring事务专题(三)事务的基本概念,Mysql事务处理原理
- cocos creator使用protobuf实现网络模块
- 简单聊聊红黑树(Red Black Tree)
- cocos creator探照灯效果实现
- servlet/filter/listener/interceptor区别与联系