SAP Spartacus 自定义 Component 的使用 - SimpleResponsiveBannerComponent
(1) 使用命令行创建一个新的Angular Component：
banner Component的实现：
通过构造函数参数注入cms Component data.
而Component的html实现，只是简单的显示一行字符串：This is a custom banner component
(2) 在Custom Module实现里，使用第一个步骤创建的CustomBannerComponent替换原始的cmsComponent：
最后运行时的效果如下：
问题：Overriding components without interfering with other sections (SimpleResponsiveBannerComponent)
我想更改 Section1 中的内容，并且从 spartacus 视频中我应该做的是覆盖该部分中使用的组件。 然而，该组件是 SimpleResponsiveBannerComponent，它至少存在于 Section1、Section2A 和 Section2B 中。 因此，如果我覆盖该组件，我也会“删除”其他部分中的内容。 如何只更改（通过代码）Section1 中的内容而不干扰其他部分？
回答
由于 Spartacus 是完全由 CMS 驱动的，并且 Slots 中的所有内容都取决于 CMS 数据，因此请遵循这种方法 - 防止在通过 CMS 进行数据操作期间产生副作用的最佳方法，这就是为什么，我认为您只有一种“正确”的方法来计算它出去。
如果您更改组件的 UI/UX 行为 - 这意味着您开始提供与其他插槽（第 1 部分、第 2A 部分和第 2B 部分）中的组件不同的新组件。
使用自定义 typeCode 创建另一个 CMS 组件以实现与 SimpleResponsiveBannerComponent 不同的内容。在需要的地方添加自定义组件，并将 SimpleResponsiveBannerComponent 留在 Section1、Section2A 和 Section2B 中。
我相信，在前端代码库方面实现它的其他可能方法（如果它们确实存在） - 错误的方式并且在通过 SmartEdit 操作数据期间可能会产生额外的问题。
原文
要获取更多Jerry的原创文章，请关注公众号"汪子熙":
SAP Spartacus 自定义 Component 的使用 - SimpleResponsiveBannerComponent相关推荐
- SAP Spartacus自定义Component的Not found问题
同样是自定义route指向的自定义Component,custom和contact的行为不同: custom path,会看到home下出现not found的标志: 而contact不会,原因是因为 ...
- 如何在SAP Spartacus自定义Component里消费数据
直接在自定义Component里使用data来访问Component数据: <p>begin of my image!</p> <img [src]="'htt ...
- SAP Spartacus自定义指令cxOutlet的工作原理
cxOutlet合集 SAP Spartacus自定义指令cxOutlet的工作原理 SAP Spartacus table cell如何通过cxOutlet在运行时动态注入组件 SAP Sparta ...
- 通过 SAP Spartacus 的 Component 映射机制，更改默认购物车 Cart 页面
Spartacus默认的购物车界面: https://github.com/SAP/spartacus-bootcamp/blob/master/sparta0/src/app/components/ ...
- SAP Spartacus popover Component 的单元测试
我们在SAP Spartacus B2B Page 的 list和Card页面,点击(i) icon之后,会看到一个popover Component,可以通过下面的选择器访问: cx-popover ...
- SAP Spartacus storefront.component.html 怎么关联到其他的页面
storefront怎么关联到其他的页面? 下图是storefront.component.html的源代码,里面使用自定义Component cx-page-layout和cx-page-slot, ...
- 如何替换SAP Spartacus启动Component -app-root
在SAP Spartacus app.module.ts里,随便定义一个简单的Component: @Component({selector: "app-root",templat ...
- SAP Spartacus popover Component css 的重用设计
按照需求,我们需要在SAP Spartacus B2B 页面的 List header 和Card header两处,同时显示info icon, 因此,有必要设计一个统一的icon style,然后 ...
- SAP Spartacus Breadcrumbs Component的显示问题讨论
如果把Storefront.component.html里position为BottomHeaderSlot改成其他名称: 按照其注释写到: position是用于为指定的page slot定位CMS ...
最新文章
- Matplotlib使用scatter函数在Python中绘制气泡图（bubble plot）、通过size参数指定数据点的大小、自定义不同分组的气泡的色彩
- 使用CNN分类签名和文本图像
- 实验5，利用三层交换机实现VLAN间路由
- 数学符号正三角形△和倒三角形▽的意思
- 日常经典用语、成语及谚语
- Android Studio-------添加按钮
- [Android][Android Studio] *.jar 与 *.aar 的生成与*.aar导入项目方法
- 语言专升本必背代码_广东省 2021 年普通高等学校专升本招生学科门类与专业基础课对应表...
- TensorFlow 2 Object Detection API 教程: 安装
- 互联网巨头竞逐客户端软件
- 【详细】mac下载在线音乐平台的音乐/mp4a转mp3格式
- 有道云笔记中轻松驾驭职场框架图
- 飞鱼星行为管理路由器【限制视频】方法（网页+客户端）
- PHP程序判断男女身高体重是否,最新男女标准体重对照表，快来看看你达标了没？...
- iMovie 裁剪视频
- 车牌识别、证件识别、汽车VIN识别在汽车服务门店中的实际应用
- 第四章-2 hydra(九头蛇)与Medusa(美杜莎)
- AddressSanitizer: heap-buffer-overflow on address 0x602000000534 at pc 0x00000040699d bp 0x7ffce0afd
- 《网蜂A8实战演练》——11.Linux 电容式触摸屏驱动
- BZOJ---4484：[Jsoi2015]最小表示【bitset】