Question

我通过扩展“ SimpleCMSComponent” @hybris端创建了自定义组件“ CustomPromotionComponent”。它在斯巴达克斯网站上呈现。

0: {slotId: "Section2A-Promotion",…}
components: {component: [{uid: "CustomPromotionComponent",…}]}
component: [{uid: "CustomPromotionComponent",…}]
0: {uid: "CustomPromotionComponent",…}
container: "false"
modifiedtime: "2020-07-25T17:58:35.279+05:30"
name: "Custom Promotion Component"
typeCode: "CustomPromotionComponent"
uid: "CustomPromotionComponent"
uuid: "eyJpdGVtSWQiOiJDdXN0b21Qcm9tb3Rpb25Db21wb25lbnQiLCJjYXRhbG9nSWQiOiJlbGVjdHJvbmljcy1zcGFDb250ZW50Q2F0YWxvZyIsImNhdGFsb2dWZXJzaW9uIjoiT25saW5lIn0="

如上所示。

如何从angular检索此数据？我也创建了相同的组件@angular侧面，但是它不起作用。我已经在.ts文件中添加了我的组件，如图所示，我也在custom-page.module.ts中添加了我的组件。

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { CmsComponentData } from '@spartacus/storefront';
import { CmsService} from '@spartacus/core';
import { CMSCustomPromotionComponent } from '../cms.custom-promotion-component';


@Component({
  selector: 'app-custom-promotion',
  templateUrl: './custom-promotion.component.html',
  styleUrls: ['./custom-promotion.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CustomPromotionComponent implements OnInit {

  componentData$: Observable<CMSCustomPromotionComponent> = this.componentData.data$;

  constructor( protected componentData: CmsComponentData<CMSCustomPromotionComponent>, 
    protected cmsService: CmsService) {}

  ngOnInit(): void {
    console.log(this.componentData$);
  }

}

html部分：

<p *ngIf="(componentData$ | async) as data" [innerHTML]="data.name"></p>

ConfigModule.withConfig({
      cmsComponents: {
        CustomPromotionComponent: {
          component: CustomPromotionComponent,
        }
      },
    } as CmsConfig)

通过扩展cmscomponent创建cmscustomcomponent。

import { CmsComponent } from '@spartacus/core';

export interface CMSCustomPromotionComponent extends CmsComponent {
    container?: string;
}

在店面渲染时，我遇到以下错误：

core.js:6228 ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[CustomPromotionComponent -> CmsComponentData]: 
  StaticInjectorError(Platform: core)[CustomPromotionComponent -> CmsComponentData]: 
    NullInjectorError: No provider for CmsComponentData!
NullInjectorError: StaticInjectorError(AppModule)[CustomPromotionComponent -> CmsComponentData]: 
  StaticInjectorError(Platform: core)[CustomPromotionComponent -> CmsComponentData]: 
    NullInjectorError: No provider for CmsComponentData!

Answer 1

您可以使用https://github.com/SAP/spartacus/blob/develop/projects/storefrontlib/src/cms-components/content/paragraph/作为参考。

这是有趣的部分：

constructor(public component: CmsComponentData<CmsParagraphComponent>) {}

Answer 2

您可以尝试在构造函数中提供CmsComponentData，检查它是否解决了问题

如何从在Spartacus中创建的@hybris端的自定义组件中获取数据

2 个答案: