关于 SAP Spartacus low level Component的customization

一些讨论链接：https://stackoverflow.com/questions/62157099/how-to-customize-lower-level-components-in-spartacus/

需求

I'm trying to customize the ProductListItemComponent and the ProductGridItemComponent in order to add some more functionality like a Stock counter.

解决方案

You are right! You can't customize ProductListItemComponent or ProductGridItemComponent via remapping it like a CMS Component, you should customize it over higher lever CMS Component - ProductListComponent.

从产品层面解决：Enable outlet for "product tile": ProductListItemComponent and ProductGridItemComponent

需求issue：

https://github.com/SAP/spartacus/issues/4231

Introduce dynamic loading of static components similarly to CMS component loading

架构

Currently we have two approaches to customise the default experience that Spartacus brings:

Spartacus 提供了两种 UI 扩展方式

1. CMS components are rendered based on the CMS component type and the JS component which is mapped to it.

2. Outlets provide a mechanism to replace or amend a component.

CMS components are only used for bigger pieces of the screen that must be controlled by business (either in SmartEdit or using personalisation).

其中，CMS Component提供了粗粒度的，从业务层面驱动和控制的屏幕定制化。

Outlets could be applied in a more fine-grained way, but they pollute the code. This is why they've been only used so-far in a generic way, i.e. when a page, slot or component is rendered dynamically.

而outlet提供了更加细粒度的定制化方式，付出的代价就是，outlet是侵入式的，因此污染了部分代码。因此，只出现在当 SAP Spartacus 的 page, slot 或者 Component 被动态渲染时。

愿景

Instead of adding a large number of outlets to the code base, we like to introduce a concept that can be applied to any static component; very similar to how we map a CMS component to a JS component, we could map any JS component.

技术调整

理想很丰满，现实很骨感。

Dynamic components seems not to be the first class citizens in the Angular's world.

Dynamic Component 不是 Angular 里的一等公民。

You can create a component dynamically thanks to Angular API, but then you have to maintain manually all the following operations for the life of the component:

• update inputs

• calculate input's changes

• trigger the lifecycle hook ngOnChanges (related to above)

• trigger change detection markForCheck

• subscribe to outputs and trigger callbacks

• bind DOM attributes

• bind DOM events

这个前沿性的研究，记录在这个链接Introduce dynamic loading of static components similarly to CMS component loading里。