如何在Spartacus中重写ProductListItemComponent内部子组件？

你对原因的判断是正确的，ProductListItemComponent属于Spartacus内部业务组件，不属于CMS组件，因此CMS组件覆盖的配置规则对它不生效。以下是两种常用的修改方案：

方案1：全局替换组件（最稳定，适配全场景） #

通过Angular依赖注入机制直接全局替换原组件的实现：

• 第一步：创建自定义组件，可直接继承原ProductListItemComponent复用逻辑，也可以完全重写，只需保证输入输出属性和原组件对齐即可：

import { Component, Input } from '@angular/core';
import { ProductListItemComponent } from '@spartacus/storefront';
import { Product } from '@spartacus/core';

@Component({
  selector: 'app-custom-product-list-item',
  templateUrl: './custom-product-list-item.component.html',
  styleUrls: ['./custom-product-list-item.component.scss']
})
export class CustomProductListItemComponent extends ProductListItemComponent {
  @Input() product: Product;
  // 可自行扩展自定义逻辑
}

• 第二步：在模块的providers数组中添加替换配置：

import { NgModule, Provider } from '@angular/core';
import { ProductListItemComponent } from '@spartacus/storefront';

const CUSTOM_PRODUCT_LIST_ITEM_PROVIDER: Provider = {
  provide: ProductListItemComponent,
  useClass: CustomProductListItemComponent
};

@NgModule({
  // 其他模块配置省略
  providers: [CUSTOM_PRODUCT_LIST_ITEM_PROVIDER]
})
export class YourFeatureModule {}

配置完成后所有引用原ProductListItemComponent的位置都会自动加载你的自定义组件，product等上下文会自动传递，无需额外处理。

方案2：使用Outlet局部替换（适合仅需修改特定页面场景） #

你之前获取不到product是因为outlet上下文的引用方式错误，正确写法如下：

<ng-template [cxOutletRef]="plOutlets.ITEM_DETAILS" let-product="product">
  {{ product | json }}
  <!-- 此处编写你的自定义HTML结构 -->
</ng-template>

也可以通过默认上下文获取：

<ng-template [cxOutletRef]="plOutlets.ITEM_DETAILS" let-item>
  {{ item.product | json }}
</ng-template>

内容的提问来源于stack exchange，提问作者Gon