关于 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 擴展方式
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的全部內容,希望文章能夠幫你解決所遇到的問題。