使用outlet在SAP Spartacus中添加自定义UI

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的原创文章，请关注公众号"汪子熙":

汪子熙 认证博客专家 前端框架 Node.js SAP JerryWang，2007年从电子科技大学计算机专业硕士毕业后加入SAP成都研究院工作至今。Jerry是SAP社区导师，SAP中国技术大使。2020年5月下旬，Jerry做了脑部肿瘤的开颅切除手术，对编程和人生又有了新的感悟。