需求
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 扩展方式
CMS components are rendered based on the CMS component type and the JS component which is mapped to it.
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里。