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$的数据源，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的原创文章，请关注公众号"汪子熙":