3

我用 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();
4

1 回答 1

1

这是个好问题。目前，我们的网点不支持该功能。

您可以做的一个解决方案是以更静态的方式注入组件（在应用程序初始化时使用 CMS 或插座，如此处所示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>whereopen$是搜索框状态的可观察对象来包装。这样该组件仅在搜索框打开时出现在 dom 中。

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

于 2020-03-18T16:10:49.703 回答