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

【问题标题】：Spartacus - Retrieving data from custom CMS componentSpartacus - 从自定义 CMS 组件中检索数据
【发布时间】：2020-04-03 13:06:45
【问题描述】：

在 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 文本吗？

【问题讨论】：

标签： angular hybris spartacus-storefront

【解决方案1】：

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

【讨论】：

【解决方案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);
  }
}

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

【讨论】：