Spartacus - 从自定义 CMS 组件中检索数据

Question

在 SAP Commerce 中，我准备了自定义 CMS 组件。我把它放在正确的插槽中。 Spartacus 收到有关它的信息 - 我可以看到该组件在页面上的正确位置。但是我怎样才能从这个组件中检索一些数据。作为对给定插槽的响应，它看起来像：

 "components": {
                "component": [
                    {
                        "uid": "NewsletterComponent",
                        "uuid": "eyJpdGVtSWQiOiJOZXdzbGV0dGVyQ29tcG9uZW50IiwiY2F0YWxvZ0lkIjoiZWxlY3Ryb25pY3Mtc3BhQ29udGVudENhdGFsb2ciLCJjYXRhbG9nVmVyc2lvbiI6Ik9ubGluZSJ9",
                        "typeCode": "NewsletterComponent",
                        "modifiedTime": "2020-04-02T21:57:10.236+02:00",
                        "name": "Newsletter Component",
                        "container": "false",
                        "mailPlaceholder": "Your email address",
                        "mailHeaderText": "E-mail Newsletter"
                    }

如何从 angular 中检索此数据？我创建了一些组件，但它不起作用

import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
import { CmsComponentData } from '@spartacus/storefront';
import { CmsComponent, CmsService } from '@spartacus/core'
import { Observable } from 'rxjs';

@Component({
  selector: 'app-newsletter',
  templateUrl: './newsletter.component.html',
  styleUrls: ['./newsletter.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class NewsletterComponent extends CmsComponentData<CmsComponent> {

  component: Observable<any>;

  constructor(cmsService: CmsService) {
    super();
    this.component = cmsService.getComponentData('NewsletterComponent')
  }


  public getText(): any {
     console.log(this.component)
  }
}

我在模块里注册了

B2cStorefrontModule.withConfig({
      cmsComponents: {
        NewsletterComponent: {
          component: NewsletterComponent
        }
      },

我可以从服务器响应中检索 mailPlaceholder 和 mailHeader 文本吗？

Answer 1

您的组件需要在构造函数中接受组件数据，例如：https://sap.github.io/spartacus/components/ParagraphComponent.html#source

Answer 2

好的，现在可以使用了:)

import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
import { CmsComponentData } from '@spartacus/storefront';
import { CmsNewsletterComponent } from '../CmsNewsletterComponent';

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

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

  cmsComp: CmsNewsletterComponent;

  ngOnInit(): void {
    this.component.data$.subscribe(comp => this.cmsComp = comp);
  }
}

现在我可以完全访问组件数据

Spartacus - 从自定义 CMS 组件中检索数据

Spartacus - Retrieving data from custom CMS component

hybris

angular

spartacus-storefront