SAP Spartacus Template-Driven Outlets
Template-Driven Outlets
基于模板驅(qū)動(dòng)的 outlets
The basic syntax for adding UI is based on a TemplateRef that can be added by the ng-template component.
添加 UI 的基礎(chǔ)語法是基于 TemplateRef,后者可以通過 ng-template Component 添加。
The cxOutletRef is used to add a reference to an outlet.
cxOutletRef 用于添加一個(gè) reference 到一個(gè) outlet 上。
The following is an example:
<ng-template cxOutletRef="header">Custom UI replacing the header </ng-template>上面代碼的 header,即指示 SAP Spartacus 標(biāo)準(zhǔn)的 UI header 區(qū)域。語義:把 Custom UI replacing the header 這行字符串,替換掉 Spartacus 標(biāo)準(zhǔn)的 header 區(qū)域。
Outlets use a string to reference a named outlet.
Outlets 使用字符串來標(biāo)識(shí)。
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 里硬編碼,要么基于內(nèi)容驅(qū)動(dòng)。后者的場景,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.
默認(rèn)情況下,outlet 關(guān)聯(lián)的 UI,會(huì)替換 Spartacus 默認(rèn)的 UI.
Component-Driven Outlets - Component 驅(qū)動(dòng)的 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 動(dòng)態(tài)添加 Component 的需求。
Instead of using a template, you can add a component factory to an outlet reference.
和使用 template 相比,我們也能添加 Component factory 到一個(gè) outlet reference 里。這樣,就能將 Component factory 對應(yīng)的 Component UI,添加到 outlet reference 指向的 Spartacus UI 上。
例子:
const factory = this.componentFactoryResolver.resolveComponentFactory(MyComponent); this.outletService.add('cx-storefront', factory, OutletPosition.BEFORE);兩種 outlet references
Data-driven outlets are provided by the CMS structure.
Data-driven outlets 由 CMS structure 提供。
指的是下圖這段代碼:
指的是下圖這段代碼:
指的是下圖這段代碼:
Spartacus 里硬編碼的 outlet reference
比如之前提到的動(dòng)態(tài)添加 UI 的例子:
const factory = this.componentFactoryResolver.resolveComponentFactory(MyComponent); this.outletService.add('cx-storefront', factory, OutletPosition.BEFORE);指的是下圖這段代碼:
指的是下面這段代碼:
這里介紹了 cx-header 和 header 的區(qū)別。后者是 header 區(qū)域所有 page slots 的容器。
navigation: The navigation wraps all page slots for the navigation section.
cx-footer: The cx-footer wraps the
to allow for customizations of the footer.footer: The footer wraps all page slots for the footer section.
cx-footer 和 footer:
總結(jié)
以上是生活随笔為你收集整理的SAP Spartacus Template-Driven Outlets的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: qt设置程序图标_qt设置软件图标
- 下一篇: 揽字的四字成语