前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Angular 关于pipe

Angular 关于pipe

作者头像
mafeifan
发布2019-03-14 00:17:05
1.5K0
发布2019-03-14 00:17:05
举报
文章被收录于专栏:finleyMa

Angular 中的管道其实就是angularjs中的过滤器,用来转换数据然后显示给用户。 要创建一个管道,必须实现 PipeTransform 接口。这个接口非常简单,只需要实现transform方法即可。 使用管道的几个注意事项:

  1. 管道可以链式使用,还可以传参 {{date | date: 'fullDate' | uppercase}}
  2. 管道分两种 纯(pure)管道与非纯(impure)管道 默认是pure的。 Angular 只有在它检测到输入值发生了纯变更时才会执行纯管道。 纯变更是指对原始类型值(String、Number、Boolean、Symbol)的更改, 或者对对象引用(Date、Array、Function、Object)的更改。 使用 impure 管道时候要小心,很可能触发非常频繁。
  3. 也是出于性能的考虑。Angular并没有提供 angularjs 自带的 Filter 和 OrderBy 过滤器,Angular官方推荐把过滤和排序放到组件中实现,比如对外提供filteredHeroessortedHeroes 属性
源码解析
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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.02.19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 源码解析
  • 参考
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档