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

Question

假设我们有CMS Component:

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]
}
];
}
}
});

，我们可以通过common Service为独立组件共享注入的CmsComponentData。

更新21.01.2021:

当我们在CMS组件中说- '打开' Angular组件时，它的意思是这样的:

this.modalService.open(SupportFormComponent);

可以看出，SupportFormComponent不是子组件，与CmsSupportComponent没有任何关系。

Answer 1

Angular使用分层依赖树，所以你可以在父组件中注入的任何实例，也可以在子组件中注入，除非它被遮蔽为新的提供商(但即使这样@SkipSelf也会有所帮助)。

因此，由于CmsComponentData是由Spartacus自动提供的，当实例化特定的cms组件时，应该可以通过注入CmsComponentData(您将获得相同的实例)将其注入任何子组件(在该组件内)。

在一些复杂配置的情况下，当你在子组件中提供不同的CmsComponentData时，你总是可以在第一个(顶部)组件中将其包装成服务(或作为不同的令牌提供)，但我认为在你的情况下不应该需要它。

Answer 2

在Spartacus文档中定义:

与组件相关的CMS数据在实例化期间由CmsComponentData服务提供给组件。CmsComponentData服务包含组件uid和data$，后者是组件有效负载的一个可观察对象。通过使用Angular的依赖注入(DI)系统，组件和特定于组件的服务可以使用CmsComponentData。

建议使用Angular DI注入CmsComponentData服务，并在你的组件中使用。

最诚挚的问候,杰瑞

Answer 3

单向:

this.modalService。open返回ModalRef。是创建实例的组件。

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

和在SupportFormComponent你应该有一个公共类属性或@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

第二条路

您可以通过帮助CmsServicegetComponentData获取cms-component的uid数据

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