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

1. Data-driven (that is, CMS-driven) outlet references
2. Software-driven outlet references

Data-driven outlets are provided by the CMS structure.

Data-driven outlets 由 CMS structure 提供。

1. CMS Page layout name: Each page layout is available as an outlet reference. 每个 Page layout 对应一个 outlet reference，即可以通过 outlet reference，将自定义 UI 添加到 page layout 对应的界面上。
2. 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.
3. 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

1. 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);

1. cx-header: The cx-header wraps the to allow for customizations of the header.
2. header: The header wraps all page slots for the header section.

这里介绍了 cx-header 和 header 的区别。后者是 header 区域所有 page slots 的容器。

1. navigation: The navigation wraps all page slots for the navigation section.
2. cx-footer: The cx-footer wraps the to allow for customizations of the footer.
3. footer: The footer wraps all page slots for the footer section.