cx-icon自定义类型在Angular开启strictTemplates时出现报错如何解决

可替代解决方案 #

• 类型合并扩展：通过TypeScript的模块扩展机制，直接将自定义的CUSTOM_ICON_TYPE合并到SAP Spartacus原生的ICON_TYPE枚举中。代码示例：

// 在项目src目录下新建spartacus-types.d.ts声明文件
declare module '@spartacus/storefront' {
  export enum ICON_TYPE {
    CHEVRON_RIGHT = 'chevron-right',
    // 依次补充所有自定义枚举值即可
  }
}

添加后无需用$any包裹，模板直接写<cx-icon [type]="customIconTypes.CHEVRON_RIGHT"></cx-icon>即可通过类型校验。

• 二次封装组件：封装自定义icon组件，内部完成类型转换后再传给原生cx-icon，对外屏蔽类型不匹配问题。示例：

// custom-icon.component.ts
import { Component, Input } from '@angular/core';
import { ICON_TYPE } from '@spartacus/storefront';
import { CUSTOM_ICON_TYPE } from './自定义枚举文件路径';

@Component({
  selector: 'app-custom-icon',
  template: `<cx-icon [type]="convertedType"></cx-icon>`
})
export class CustomIconComponent {
  @Input() type: CUSTOM_ICON_TYPE;
  get convertedType(): ICON_TYPE {
    return this.type as unknown as ICON_TYPE;
  }
}

模板中直接调用<app-custom-icon [type]="customIconTypes.CHEVRON_RIGHT"></app-custom-icon>即可。

• 组件内提前断言：在业务组件的ts文件中提前完成类型断言，不要把类型转换逻辑放在模板中。示例：

// 业务组件ts文件
import { Component } from '@angular/core';
import { ICON_TYPE } from '@spartacus/storefront';
import { CUSTOM_ICON_TYPE } from './自定义枚举文件路径';

@Component({
  // 组件常规配置
})
export class YourBusinessComponent {
  readonly CHEVRON_RIGHT = CUSTOM_ICON_TYPE.CHEVRON_RIGHT as unknown as ICON_TYPE;
  // 其他自定义枚举值同理处理
}

模板直接传入处理后的变量即可，无需使用$any。

cx-icon组件适配进度说明 #

目前SAP Spartacus官方已在6.0及以上版本开放了ICON_TYPE的可扩展能力，支持开发者通过配置注入自定义图标类型，不需要修改原生类型定义。如果项目使用的Spartacus版本低于6.0，可以先使用上述替代方案，升级到高版本后即可使用官方提供的自定义图标扩展功能。

内容的提问来源于stack exchange，提问作者Filipe Espósito