Question

在编译新的自定义段落组件时遇到错误

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

7

~~~~~~~~~

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)

Answer 1

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

这是您应该做的：

选项1

将component构造函数参数设为私有或受保护，因为您不在模板中使用
将data$的{{1}}属性分配给属性component.data$。您可以在创建属性时或在het oninit生命周期挂钩期间直接执行此操作
观察data $属性

cmsComponent

component$: Observable<CmsParagraphComponent> = this.component.data$;
  
constructor(protected component: CmsComponentData<CmsParagraphComponent>) { }

选项2

直接在html中使用 public 服务
绑定到服务的<p *ngIf="(component$ | async) as data" [innerHTML]="data.name"></p>属性

data$

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

虽然选项2较短，但我更喜欢选项1。如果您需要对数据流进行操作并将其他流引入混合，则它的伸缩性更好。

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

1 个答案:

选项1

选项2