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

Question

我使用了 this.outletService.add('BottomHeaderSlot', factory, OutletPosition.BEFORE);在搜索按钮单击处理程序期间，在 BottomHeaderSlot 中添加自定义组件。我打算在标题下添加 searchOverlay 以添加自定义搜索行为。
但是我的自定义组件在调用 outletService.add 后没有显示在标题下。我引用了这个https://sap.github.io/cloud-commerce-spartacus-storefront-docs/outlets/ . outletService是否支持运行时动态添加组件？

以下是我的按钮处理程序

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

Answer 1

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

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

然后您的组件可以用 <ng-container *ngIf="open$ | async></ng-container> 包裹起来其中 open$是搜索框状态的可观察值。这样，当搜索框打开时，组件只会出现在 dom 中。

通过 socket 动态添加组件的想法是一个很好的想法，我们会牢记在心。我将在 Github 上提出一个问题作为改进。