Spartacus 2211自定义购物车组件中取货选项容器失效问题

问题1：cx-cart-pickup-options-container失效的核心原因 #

• 选择器不匹配：你创建的自定义组件选择器是app-custom-cart-pick-up-container，但模板里仍使用默认的cx-cart-pickup-options-container，等于根本没触发自定义组件的渲染，自然不会生效。
• 上下文数据缺失：CartPickupOptionsContainerComponent依赖购物车项的cartEntry数据才能拉取并展示取货选项，你仅继承了组件但未确保父购物车组件将该数据正确传入，组件拿不到数据源就无法正常工作。
• Standalone组件依赖不全：虽然你导入了基础模块，但Spartacus取货组件依赖全局的PickupOptionService、CartService等核心服务，standalone组件若未正确注入这些服务，功能初始化会直接失败。

问题2：集成自定义取货容器组件的正确方法 #

1. 替换默认组件（关键步骤）
   利用Spartacus的组件替换机制，在应用配置中将原始组件替换为自定义组件，示例代码（app.config.ts）：

   import { provideConfig } from '@spartacus/core';
   import { PickupInStoreConfig } from '@spartacus/pickup-in-store/core';
   import { CustomCartPickUpContainerComponent } from './path/to/your/component';
   
   export const appConfig = {
     // 其他全局配置
     featureModules: {
       pickupInStore: {
         components: {
           CartPickupOptionsContainerComponent: CustomCartPickUpContainerComponent,
         },
       },
     },
   };
   
   export default provideConfig(appConfig as PickupInStoreConfig);
   

2. 确保购物车项数据传递
   在自定义购物车项组件的模板中，给自定义取货容器组件传入cartEntry：

   <app-custom-cart-pick-up-container [cartEntry]="entry"></app-custom-cart-pick-up-container>
   

3. 继承时保留输入属性
   父类CartPickupOptionsContainerComponent已声明@Input() cartEntry，自定义组件继承后无需重复声明，只需确保模板中正确传递该值即可。

问题3：必须补充的额外步骤 #

1. 注册组件依赖
   若使用standalone组件，需在父购物车项组件的imports数组中导入CustomCartPickUpContainerComponent，或在全局配置中完成注册。
2. 注入核心服务
   在自定义组件的providers中添加依赖服务，避免standalone组件找不到全局服务：

   @Component({
     // 其他组件配置
     providers: [PickupOptionService, CartService]
   })
   

3. 复用原始模板（无需改UI场景）
   如果仅需扩展逻辑而非修改UI，直接在自定义组件的HTML中复用原始组件并传递数据：

   <cx-cart-pickup-options-container [cartEntry]="cartEntry"></cx-cart-pickup-options-container>
   

4. 调试数据传递情况
   在自定义组件中添加日志，确认cartEntry是否正确传入：

   ngOnInit() {
     console.log('当前购物车项数据：', this.cartEntry);
   }
   

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