类型 'TestComponent' 与类型 'CmsComponent' 没有共同的属性

Question

我有一组在 CMS 中创建的自定义组件。自定义组件扩展了 BannerComponent 并拥有自己的属性称为“颜色”。

我创建了模型：

    import { BannerComponent } from '@spartacus/storefront';


    export class TestComponent extends BannerComponent{
        color?: string;
    }

我正在尝试从 Angular 组件获取数据。

构造函数（私有组件数据：CmsComponentData，私有 cmsService: CmsService) { }

执行此操作时出现以下错误：

类型 'TestComponent' 与类型 'CmsComponent' 没有共同的属性。

如何解决这个问题并在 angular 组件中获取自定义组件的数据。

Answer 1

您遇到的错误来自打字稿编译器。在那次检查期间，没有可用的信息来了解您实际上期待的是 BannerComponent 界面。请记住，typescript 正在执行静态代码验证。

要让编译器知道预期的接口，您需要告诉它。默认情况下，CmsComponentData class 使用 CmsComponent 接口。但是，您可以通过将接口传递给 CmsComponentData:

来传递自定义接口


export interface TestComponent extends CmsBannerComponent{
  color?: string;
}

constructor(
  private componentData: CmsComponentData<TestComponent>, 
  private cmsService: CmsService
) { }

Answer 2

型号Class：

    import { BannerComponent } from '@spartacus/storefront';
    export interface TestComponent extends BannerComponent{
        color?: string;
    }

组件：

    import { Component, OnInit } from '@angular/core';
    import { CmsService } from '@spartacus/core';
    import {  CmsComponentData } from '@spartacus/storefront';
    import { TestComponent } from 'src/app/models/service-tile.model';

    @Component({
      selector: 'app-service-tile',
      templateUrl: './service-tile.component.html',
      styleUrls: ['./service-tile.component.scss']
    })
    export class ServiceTileComponent implements OnInit {

      constructor(private componentData: CmsComponentData<TestComponent>, 
        private cmsService: CmsService) { }
      ngOnInit(): void {
      }

    }

来自 hybris 的回复：

    {
     "slotId" : "Section1",
     "slotUuid" : "yyyy",
     "position" : "ServiceTileSection",
     "name" : "Service Tile Section",
     "slotShared" : false,
     "components" : {
        "component" : [ {
            "uid" : "TestComponent",
            "uuid" : "xxxx",
           "typeCode" : "ServiceTileBannerComponent",
           "modifiedtime" : "2020-10-07T21:18:28.4+05:30",
           "name" : "Component",
           "container" : "false",
           "external" : "false",
           "color" : "RED",
           "media" : {
              "code" : "Tile1.jpg",
              "mime" : "image/png",
              "altText" : "Car Trade In",
              "url" : "/medias/?context=3NGMyZjRkZTU4YTMz"
           },
           "headline" : "Test"
        },
        {
            component2
        },
        {
            component3
        }
    ]
    }
    }

这正是我在示例中使用的类。

类型 'TestComponent' 与类型 'CmsComponent' 没有共同的属性

Type 'TestComponent' has no properties in common with type 'CmsComponent'

spartacus-storefront