ITPub博客

首页 > 应用开发 > Javascript > 在SAP Spartacus产品明细页面用outlet显示自定义数据

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

原创 Javascript 作者:i042416 时间:2020-11-22 22:37:52 0 删除 编辑

首先创建一个新的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里:



最后的效果:




来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/24475491/viewspace-2735924/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论
测试

注册时间:2018-01-20

  • 博文量
    3822
  • 访问量
    1981767