首页 > 编程学习 > Angular async pipe在Component html模板中的一个实际应用

SAP Spartacus UI开发的guideline:

UI components bind to observable data from the back end, using the standard Angular async pipe.

UI Component绑定到从后台返回的Observable数据.

看个例子:

<cx-carousel
  [items]="items$ | async"
  [title]="title$ | async"
  [template]="carouselItem"
  itemWidth="285px"
>
</cx-carousel>

title$是消费cx-carousel的Component传入的Observable对象。

this.componentData$是从Commerce Cloud后台返回的原始数据,但是UI展示只对title感兴趣,所以调用map operator进行数据映射。

title 的 数 据 源 , c o m p o n e n t D a t a 的数据源,componentData componentData, 也是一个Observable,来自ComponentData.data$调用pipe执行filter操作后的结果:

运行时title$的值通过async pipe取出:

operator里能看到map操作:

这个Observable是通过另一个Observable执行filter操作得到的:

这个source指向的Observable就是componentData.data$:



async pipe的实现类是AsyncPipe,实现了PipeTransform接口的transform方法:

transform方法里执行subscribe, 触发Observable的执行:


要获取更多Jerry的原创文章,请关注公众号"汪子熙":

Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000