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

时间:2022-07-24
本文章向大家介绍在SAP Spartacus产品明细页面用outlet显示自定义数据，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

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

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

MyOutletsComponent的实现：

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

在这个Component的html里，显示product$的值：

<ng-template cxOutletRef="ProductDetailsPageTemplate" cxOutletPos="before" let-model>
    <h1>Jerry</h1>
    <p>Product: {{ product$ | async | json }}</p>
</ng-template>

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

最后的效果：

随机文章
本站知识点必读
最近更新