使用outlet在SAP Spartacus中添加自定义UI

简介: 使用outlet在SAP Spartacus中添加自定义UI

outlet 或者在SAP Spartacus中硬编码,或者通过CMS driven.


Angular里添加自定义UI的原理是基于TemplateRef, 通过ng-template Component 添加。


cxOutletRef是 Angular directive的selector:


image.pngimage.png通过OutletRefModule暴露给消费者。

Just a simple piece of code to inject your custom UI element to SAP Spartacus via outlet:image.png其中header定义在storefront.component.html里:

image.png最后的效果:默认情况下把标准的header区域替换了:image.png如果加上属性值cxOutletPos=“after”, 则不覆盖header,而是放到标准header的后面:image.png效果如下:image.pngimage.png如果没有TemplateRef,想希望通过TypeScript的方式动态添加Component,应该怎么做?

例子:image.pngimage.pngimage.png

相关文章
|
2天前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
33 0
|
2天前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
18 0
|
2天前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
36 0
|
2天前
|
JSON 前端开发 测试技术
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
24 0
|
2天前
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
27 0
|
2天前
|
监控 测试技术
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
14 3
|
2天前
element-ui中Form表单使用自定义验证规则
element-ui中Form表单使用自定义验证规则
12 0
|
2天前
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
16 1
什么是 SAP ABAP 里的 Subscreen
|
2天前
|
网络架构 开发者 UED
Spartacus 2211 的 provideOutlet 方法扩展 UI
Spartacus 2211 的 provideOutlet 方法扩展 UI
14 0
Spartacus 2211 的 provideOutlet 方法扩展 UI
|
2天前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
18 0