在SAP Spartacus产品明细页面用outlet显示自定义数据
2023-09-14 09:02:52 时间
首先创建一个新的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的原创文章,请关注公众号"汪子熙":
相关文章
- SAP UI5 sap.ui.core.Element 的概要介绍
- 关于 sap.ui.base.Object 的简要介绍
- SAP Spartacus 产品搜索页面结果里的 filter 设计明细
- SAP UI5 sap.ui.Device.media 的使用介绍
- 使用代码给 SAP CRM appointment 和 Opportunity 创建关联关系
- 报告分享|中国信通院云大所与思爱普 SAP:2022年新型中国企业的智慧管理平台研究报告
- [ChatGPT 勘误] SAP UI5 的 sap.ui.base.Object
- SAP Gateway 在开发系统和生产系统上的缓存控制
- SAP QM QS21创建检验特性,报错- Number range interval 01 for number range object QMERKMALE
- SAP QM 源检验流程研习
- SAP UI5 sap.m.Table Manual Pop-In Mode 概述
- SAP Emarsys 和 SAP Spartacus 的集成
- 安装SAP,Linux获台前瞻未来(linux安装sap)
- 深入比较:SAP vs Oracle(sap和oracle)
- 如何给指定用户发送SAP系统消息-TH_POPUP详解编程语言
- SAP Smartform 取消默认的Word编辑器详解编程语言
- sap的内核升级,修补了源代码保护的方式详解编程语言
- SAP ABAP–通过Field-symbols修改内表详解编程语言
- SAP基本搜索帮助及增强出口详解编程语言
- 前SAP首席产品官加盟谷歌云,贯彻开放和多云战略
- 数据库解决方案如何使用SAP创建Redis数据库(sap怎么创建redis)
- 使用Oracle与SAP进行数据接口开发(oracle sap接口)