SAP Spartacus Template-Driven Outlets
Template-Driven Outlets
基于模板驱动的 outlets
The basic syntax for adding UI is based on a TemplateRef that can be added by the ng-template component.
添加 UI 的基础语法是基于 TemplateRef，后者可以通过 ng-template Component 添加。
The cxOutletRef is used to add a reference to an outlet.
cxOutletRef 用于添加一个 reference 到一个 outlet 上。
The following is an example:
<ng-template cxOutletRef="header">Custom UI replacing the header
</ng-template>
上面代码的 header，即指示 SAP Spartacus 标准的 UI header 区域。语义：把 Custom UI replacing the header 这行字符串，替换掉 Spartacus 标准的 header 区域。
Outlets use a string to reference a named outlet.
Outlets 使用字符串来标识。
The outlet names are either hard-coded in Spartacus, or driven by content. In the latter case, the outlets are driven by your CMS setup.
Outlet 的名称，要么在 Spartacus 里硬编码，要么基于内容驱动。后者的场景，outlets 通过 CMS setup 生成。
The cxOutletRef directive is exported from the OutletRefModule. If you wish to use the directive in your application, make sure that you import this module.
By default, the UI provided to the outlet replaces the default UI in Spartacus.
默认情况下，outlet 关联的 UI，会替换 Spartacus 默认的 UI.
Component-Driven Outlets - Component 驱动的 outlets 使用场景
While the usage of ng-template is convenient, it is limited when no TemplateRef is available.
虽然 ng-template 使用很方便，但是其局限于 TemplateRef 是否可用。
Also, there may be scenarios where you wish to add a component dynamically, outside the UI, using typescript.
并且，也存在期望使用 TypeScript 动态添加 Component 的需求。
Instead of using a template, you can add a component factory to an outlet reference.
和使用 template 相比，我们也能添加 Component factory 到一个 outlet reference 里。这样，就能将 Component factory 对应的 Component UI，添加到 outlet reference 指向的 Spartacus UI 上。
例子：
const factory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
this.outletService.add('cx-storefront', factory, OutletPosition.BEFORE);
两种 outlet references
- Data-driven (that is, CMS-driven) outlet references
- Software-driven outlet references
Data-driven outlets are provided by the CMS structure.
Data-driven outlets 由 CMS structure 提供。
- CMS Page layout name: Each page layout is available as an outlet reference. 每个 Page layout 对应一个 outlet reference，即可以通过 outlet reference，将自定义 UI 添加到 page layout 对应的界面上。
指的是下图这段代码：
- CMS page slot positions: Each slot position is an outlet reference. Since slot positions are not necessarily unique throughout the CMS structure, an outlet template might occur more then once. There is currently no standard technique available to limit the outlet for a specific position or page.
指的是下图这段代码：
- CMS Component type: Each component type is available as an outlet. While component type-driven outlets can be used, it is generally considered best practice to leverage Customizing CMS Components for introducing custom component UI.
指的是下图这段代码：
Spartacus 里硬编码的 outlet reference
- cx-storefront: There is no outlet available for the overall storefront experience, or for adding UI to the header and footer. The cx-storefront can be useful when you wish to introduce additional UI to the storefront, either to replace UI, or to add it before or after.
比如之前提到的动态添加 UI 的例子：
const factory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
this.outletService.add('cx-storefront', factory, OutletPosition.BEFORE);
指的是下图这段代码：
- cx-header: The cx-header wraps the <header> to allow for customizations of the header.
- header: The header wraps all page slots for the header section.
指的是下面这段代码：
这里介绍了 cx-header 和 header 的区别。后者是 header 区域所有 page slots 的容器。
navigation: The navigation wraps all page slots for the navigation section.
cx-footer: The cx-footer wraps the
footer: The footer wraps all page slots for the footer section.
cx-footer 和 footer：
SAP Spartacus Template-Driven Outlets相关推荐
- 如何查看 SAP Spartacus PageLayoutComponent 里的 template$ 的值
SAP Spartacus PageLayoutService.ts 里的 templateName$ get 操作:返回一个 Observable 对象,包裹的类型为 string. pipe 的第 ...
- SAP Spartacus home页面的layout，template，section和slots
本地编辑这个文件: projects\storefrontlib\src\cms-structure\page\page-layout\page-layout.component.html 加上如下代 ...
- SAP Spartacus Page Layout学习笔记
文档地址: https://sap.github.io/spartacus-docs/page-layout/#outlet-position Spartacus is based on a sing ...
- 如何找到SAP Spartacus UI可以扩展的outlet
Spartacus两种outlet: CMS data driven outlet software driven outlet 文件位置: C:\Code\SPA\spartacus\project ...
- SAP Spartacus PageLayoutComponent 如何知道自己应该显示哪些具体内容
我们以前介绍过,经过 SAP Spartacus 路由配置后的 routes 数组,其 route 数据结构的 Component 属性,清一色指向 generic 的 PageLayoutCompo ...
- SAP Spartacus 如何根据 page layout 获得对应支持的 slots
在 SAP Spartacus PageLayout Component 的实现里,每一个 layoutName 对应都有一个 cxOutlet 可供扩展: 第 13 行的 ngFor 指令,将该实现 ...
- SAP Spartacus 服务器端渲染文件 server.js 和构建后的 main.js 对比
构建之前: 构建之后: 其中 express__WEBPACK_IMPORTED_MODULE_3__ 来自 module uX2x: uX2x 来自 node_modules/express/ind ...
- SAP Spartacus 里的 cxOutletRef 指令执行过程分析
先看 cxOutletRef 指令的效果:ng-template 里定义了如下图标 1 区域所示的自定义 UI,通过 cxOutletRef, 将其插入到图标 2 所示的 ProductDetails ...
- SAP Commerce Cloud WCMS 里的 home 页面和 SAP Spartacus Page API 返回的数据比较
You can only create new components in the WCMS Page View perspective. In the Live Edit perspective, ...
最新文章
- Spring使用注解配置依赖注入
- 一起学spring--我的第一个Spring程序，简单粗暴易懂
- [转]SQL Server 高性能写入的一些总结
- python能做什么游戏好-用Python可以做哪些有意思的小游戏呢？
- TCP/IP 协议簇 端口 三次握手 四次挥手 11种状态集
- .Net5发布在即，当心技术断层！
- python list合并_python基础===两个list合并成一个dict的方法
- MoveNet 姿态估计，树莓派上也能跑！
- 【Android】修改Android 模拟器IMEI
- 滴滴北京网约车将涨价 官方解释：为了平衡供需矛盾
- [转]常用的CSS命名规则
- 每日算法系列【LeetCode 1031】两个非重叠子数组的最大和
- Hamcrest 测试匹配框架
- ie浏览器html页面怎么清缓存,Web项目中，清理浏览器缓存的几种方式
- 路由器04--OPKG
- 漏洞修复：javascript框架库漏洞
- 前端H5新增标签和CSS3高级
- 寒江独钓 第二章 课后习题
- Sentinel-1A卫星数据下载
- dynamic linke library example (C/C++)