一些討論鏈接：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 擴展方式

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里。

總結

以上是生活随笔為你收集整理的关于 SAP Spartacus low level Component的customization的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。