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