我想自定义具有选择器 cx-added-to-cart-dialog 的 AddedToCartDialogComponent

I want to customize AddedToCartDialogComponent which has selector cx-added-to-cart-dialog

我想自定义 AddedToCartDialogComponent 并向此对话框添加一些新元素 window。 我读过斯巴达克斯的文档。 我不太确定为什么它不起作用。因为我没有看到任何变化。

斯巴达克斯版本:4 这是一个代码:

custom.module.ts:

 @NgModule({
  declarations: [
    CustomSideCartComponent
  ],
  imports: [
    CommonModule,
    StarRatingModule,
    ConfigModule.withConfig({
      cmsComponents: {
        AddedToCartDialogComponent: {
          component: CustomSideCartComponent, // new custom component
        },
      },
    } as CmsConfig),
  ],
  exports: [CustomSideCartComponent],
})
export class CustomSidecartModule { }

custom.component.ts:

@Component({
  selector: 'app-custom-side-cart',
  templateUrl: './custom-side-cart.component.html',
  styleUrls: ['./custom-side-cart.component.css']
})
export class CustomSideCartComponent extends AddedToCartDialogComponent implements OnInit {

  product$: Observable<Product | null> = this.currentProductService.getProduct();

  constructor(
    private currentProductService: CurrentProductService,
    protected modalService: ModalService,
    protected cartService: ActiveCartService
  ) {
    super(modalService, cartService)
  }

  ngOnInit(): void {
  }

}

custom.component.html:

<ng-container *ngIf="product$ | async as product">
  <h1 class="new-name">{{ product.name }}</h1>
  <cx-star-rating [rating]="4"></cx-star-rating>
</ng-container>

app.module.ts:

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    StoreModule.forRoot({}),
    EffectsModule.forRoot([]),
    SpartacusModule,
    FormsModule,
    ReactiveFormsModule,
    CustomPdpModule,
    CustomSidecartModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

没有定义 CMS AddedToCartDialogComponent,因此您不能以这种方式覆盖它。在 Spartacus 4 中,您必须提供自己的 AddToCartComponent 版本,并覆盖方法 openModal.