如何在 Spartacus 中的独立组件之间共享 CMSComponentData

Question

假设我们有 CMS 组件：

ConfigModule.withConfig(<CmsConfig>{
  cmsComponents: {
    CmsSupportComponent: {
      component: SupportComponent,
    },
  },
}),

但是我们必须从内部打开另一个 Angular 组件，它也需要相同的 CMSComponentData。简单 Angular 组件与同一个 Angular 模块相关。

我知道我们可以通过 Angular 服务来做到这一点，Angular 方式很常见（这需要一些方便的工作）。但也许斯巴达克斯有一些类似于的方法：

ConfigModule.withConfig({
  cmsComponents: {
    CmsSupportComponent: {
        component: SupportComponent,
        providers: [
        {
          provide: SupportComponentService,
          useClass: SupportComponentService,
          deps: [CmsComponentData]
        }
      ];
    }
  }
});

我们可以通过独立组件的通用服务共享注入的CmsComponentData。

更新 21.01.2021：

当我们说 - 'open' Angular component from inside CMS Component 时，意思是这样的：

this.modalService.open(SupportFormComponent);

如您所见，SupportFormComponent 不是子组件，与 CmsSupportComponent 没有任何关系。

Answer 1

定义在Spartacus documentation:

The CMS data that is related to a component is provided to the component by the CmsComponentData service during instantiation. The CmsComponentData service contains the component uid, and also data$, which is an observable to the component payload. By making use of the Angular dependency injection (DI) system, components and component-specific services can use the CmsComponentData.

推荐使用 Angular DI 注入 CmsComponentData 服务并在您的组件中使用。

此致，杰瑞

Answer 2

Angular 使用分层依赖树，因此您可以在父组件中注入的任何实例，也可以在子组件中注入，除非它被隐藏为新的提供者（但即便如此@SkipSelf 可能会有所帮助） .

因此，由于 CmsComponentData 是由 Spartacus 自动提供的，当实例化特定的 cms 组件时，应该可以通过注入 CmsComponentData (你会得到相同的实例）。

在某些复杂配置的情况下，当您在子组件中提供不同的 CmsComponentData 时，您始终可以在获取它的第一个（顶部）组件中将其包装到服务中（或作为不同的令牌提供），但我认为在您的情况下，不需要它。

Answer 3

一种方式：

this.modalService.open returns 模态引用。它是实例创建组件。

const  modal = this.modalService.open(SupportFormComponent);
modal.someProp = someData;

并且在 SupportFormComponent 中你应该有 public class 属性或 @Input someProp

你可以在这里看到例子https://github.com/SAP/spartacus/blob/develop/projects/storefrontlib/src/cms-components/cart/add-to-cart/add-to-cart.component.ts#L103

Answer 4

第二种方式。

您可以通过 uid 获取有关 cms-component 的数据帮助 CmsService getComponentData

https://github.com/SAP/spartacus/blob/develop/projects/core/src/cms/facade/cms.service.ts#L67

如何在 Spartacus 中的独立组件之间共享 CMSComponentData

How to share CMSComponentData between independent components in Spartacus

spartacus-storefront