outlet 或者在SAP Spartacus中硬編碼，或者通過CMS driven.

Angular里添加自定義UI的原理是基于TemplateRef, 通過ng-template Component 添加。

cxOutletRef是 Angular directive的selector:

通過OutletRefModule暴露給消費者。

Just a simple piece of code to inject your custom UI element to SAP Spartacus via outlet:

其中header定義在storefront.component.html里：

最后的效果：默認情況下把標準的header區域替換了：

如果加上屬性值cxOutletPos=“after”, 則不覆蓋header，而是放到標準header的后面：

效果如下：

如果沒有TemplateRef，想希望通過TypeScript的方式動態添加Component，應該怎么做？

例子：

export function registerOutletsFactory(providedOutletOptions: ProvideOutletOptions[],componentFactoryResolver: ComponentFactoryResolver,outletService: OutletService<ComponentFactory<Type<any>>> ) {const result = () => {(providedOutletOptions ?? []).forEach((options) => {const factory = componentFactoryResolver.resolveComponentFactory(options.component);outletService.add(options.id,factory,options.position ?? OutletPosition.AFTER);});};return result; }

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的使用outlet在SAP Spartacus中添加自定义UI的全部內容，希望文章能夠幫你解決所遇到的問題。

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