+-
![在SAP Spartacus产品明细页面用outlet显示自定义数据 在SAP Spartacus产品明细页面用outlet显示自定义数据](https://bitbucket.org/gdata02/tu07/raw/2b04ab72f1f6aaa8f80798859fb980a5a36e5851/2020/11/25/b849b369356049fdb512d3db36aea636_400.jpg)
首先创建一个新的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里:
最后的效果:
要获取更多Jerry的原创文章,请关注公众号"汪子熙":