OutletService是否支持在按钮处理程序中动态添加组件

Question

我使用了this.outletService.add（'BottomHeaderSlot'，factory，OutletPosition.BEFORE）;在搜索按钮中，单击处理程序以在BottomHeaderSlot中添加自定义组件。我打算在标题下添加searchOverlay以添加自定义搜索行为。但是，在调用outletService.add之后，我的自定义组件未显示在标题下。我指的是https://sap.github.io/cloud-commerce-spartacus-storefront-docs/outlets/。奥特莱斯服务是否在运行时支持动态添加组件？

以下是我的按钮处理程序

  open(): void {
    const factory = this.componentFactoryResolver.resolveComponentFactory<SearchOverlayComponent>(SearchOverlayComponent);
    this.outletService.add('BottomHeaderSlot',  <any>factory, OutletPosition.BEFORE);
    this.cd.markForCheck();

Answer 1

这是一个很好的问题。目前，我们的商店不支持此功能。

您可以采取的解决方案是以更静态的方式注入组件（如应用程序初始化时（如https://github.com/SAP/cloud-commerce-spartacus-storefront/blob/develop/projects/storefrontlib/src/cms-components/asm/services/asm-enabler.service.ts所示，是CMS还是插座）？

您的组件然后可以用<ng-container *ngIf="open$ | async></ng-container>包裹，其中open$对于搜索框的状态是可观察到的。这样，只有在打开搜索框时，组件才会显示在dom中。

通过插座动态添加组件的想法是我们牢记的一个好主意。我将在Github上打开一个问题作为改进。