在SAP Spartacus产品明细页面用outlet显示自定义数据

首先创建一个新的Angular module和Component:

在SAP Spartacus产品明细页面用outlet显示自定义数据_第1张图片

这个新的module,因为要使用Outlet功能,所以需要从@Spartacus/storefront里导入OutletRefModule,以及导出我们自己实现的MyOutletsComponent以便让外界消费。

在SAP Spartacus产品明细页面用outlet显示自定义数据_第2张图片

MyOutletsComponent的实现:

在构造函数里注入currentProductService, 调用getProduct方法异步读取当前product属性,存储在属性product$里:

在SAP Spartacus产品明细页面用outlet显示自定义数据_第3张图片

在这个Component的html里,显示product$的值:

在SAP Spartacus产品明细页面用outlet显示自定义数据_第4张图片


    

Jerry

Product: {{ product$ | async | json }}

在SAP Spartacus产品明细页面用outlet显示自定义数据_第5张图片

最后别忘了把Component的selector标签加到app Component的html里:

在SAP Spartacus产品明细页面用outlet显示自定义数据_第6张图片

最后的效果:

在SAP Spartacus产品明细页面用outlet显示自定义数据_第7张图片

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

你可能感兴趣的:(sap,saprfc,angular,angularjs,javascript)