时间戳

首页 > 解决方案 > 新的自定义段落组件中的 Spartacus 编译错误

hybris - 新的自定义段落组件中的 Spartacus 编译错误

问题描述

编译新的自定义段落组件时出现以下错误

** src/app/custom-page/new-para/new-para.component.html:7:12 中的错误 - 错误 TS2769：没有与此调用匹配的重载。最后一个重载给出了以下错误。“CmsComponentData”类型的参数不能分配给“Promise”类型的参数。“CmsComponentData”类型缺少“Promise”类型的以下属性：然后，catch，[Symbol.toStringTag]，最后

7 <p *ngIf="(cmsComponent | async)?.data as data" [innerHTML]="data.content">

~~~~~~~~~

src/app/custom-page/new-para/new-para.component.ts:8:16 8 templateUrl: './new-para.component.html', ~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~ 组件NewParaComponent的模板出错。

**

使用的文件：

"new-para.component.ts"

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

@Component({
  selector: 'app-new-para',
  templateUrl: './new-para.component.html',
  styleUrls: ['./new-para.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})

export class NewParaComponent {

  cartPromotion$: Observable<PromotionResult[]> = this.promotionService.getOrderPromotionsFromCart();
  
  cmsComponent: CmsParagraphComponent;
  
  constructor(protected promotionService: PromotionService, 
    public component: CmsComponentData<CmsParagraphComponent>, 
    public cmsService: CmsService) { }

}

"new-para.component.html"

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

"custom-page.module.ts"

ConfigModule.withConfig({
      cmsComponents: {
        CMSParagraphComponent: {
          component: NewParaComponent,
        }
      }

尝试两个选项后出现新的控制台错误：

core.js:6228 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[CmsComponentData -> CmsComponentData -> CmsComponentData]: 
  NullInjectorError: No provider for CmsComponentData!
NullInjectorError: R3InjectorError(AppModule)[CmsComponentData -> CmsComponentData -> CmsComponentData]: 
  NullInjectorError: No provider for CmsComponentData!
    at NullInjector.get (core.js:1085)
    at R3Injector.get (core.js:16955)
    at R3Injector.get (core.js:16955)
    at R3Injector.get (core.js:16955)
    at NgModuleRef$1.get (core.js:36329)
    at Object.get (core.js:33972)
    at getOrCreateInjectable (core.js:5848)
    at Module.ɵɵdirectiveInject (core.js:21103)
    at NodeInjectorFactory.NewParaComponent_Factory [as factory] (new-para.component.ts:12)

标签： hybrisspartacus-storefront

解决方案

感谢您发布代码片段，这很有帮助。根据错误，代码似乎缺少一些点点滴滴，但我明白了。

这是你应该做的：

选项1

  • 将component构造函数参数设为私有或受保护，因为您不在模板中使用它
  • 将data$属性从分配component.data$给 属性cmsComponent。您可以在创建属性时或在 het oninit 生命周期挂钩期间直接执行此操作
  • 观察 data$ 属性
component$: Observable<CmsParagraphComponent> = this.component.data$;
  
constructor(protected component: CmsComponentData<CmsParagraphComponent>) { }

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

选项 2

  • 直接在html中使用公共服务
  • 绑定到data$服务的属性
constructor(public component: CmsComponentData<CmsParagraphComponent>) { }

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

虽然选项 2 更短，但我更喜欢选项 1。它可以更好地扩展，以防您需要对数据流进行操作并将其他流混合在一起。

推荐阅读