Template-Driven Outlets

基于模板驅(qū)動的 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 用于添加一個 reference 到一個 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)識。

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ū)動。后者的場景，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，會替換 Spartacus 默認(rèn)的 UI.

Component-Driven Outlets - Component 驅(qū)動的 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 動態(tài)添加 Component 的需求。

Instead of using a template, you can add a component factory to an outlet reference.

和使用 template 相比，我們也能添加 Component factory 到一個 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 (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 對應(yīng)一個 outlet reference，即可以通過 outlet reference，將自定義 UI 添加到 page layout 對應(yīng)的界面上。

指的是下圖這段代碼：

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.

比如之前提到的動態(tài)添加 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 的區(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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。