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

问题描述

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

我已经创建了模型：

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


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

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

constructor（私有componentData：CmsComponentData， 私人cmsService：CmsService）{}

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

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

如何解决此问题并获取角度分量中自定义分量的数据。

解决方法

您遇到的错误来自打字稿编译器。在该检查期间，没有任何信息可用来了解您实际上正在使用BannerComponent接口。请记住，打字稿正在执行静态代码验证。

要使编译器知道预期的接口，您需要告诉它。默认情况下，CmsComponentData类使用CmsComponent接口。但是，您可以通过将自定义界面传递到CmsComponentData：

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

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

,

模型类：

    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 {
      }

    }

杂种的反应：

    {
     "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
        }
    ]
    }
    }

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