Angular14中使用@HostBinding设置自定义CSS变量不生效如何解决

CSS自定义属性不存在自动递归解析的逻辑。你当前给--color绑定的是纯字符串--blue，浏览器读取var(--color)时会直接把这个字符串作为属性值，不会主动把它识别成另一个CSS变量的引用去做二次查找，因此这个值是无效的颜色值，自然无法渲染出预期的蓝色。
只有当你直接给--color传入浏览器可识别的合法颜色值（比如十六进制色值、rgb()、hsl()值）时，渲染才会正常，这也是你直接传十六进制值功能正常的原因。

你可以任选以下两种方案实现需求：

• 方案1：嵌套var()引用
  给--color赋值时，直接把预设变量名包裹在var()函数里，让浏览器识别到这是变量引用，就能正常解析到你在:host里定义的预设色值。这种方案的优势是所有色值定义仍然收敛在CSS中，符合样式与逻辑分离的开发习惯。
  调整后的TS代码：

  @HostBinding('style.--color') myColor: string = 'var(--blue)'
  

  原有CSS代码无需修改。如果要支持外部通过@Input()传入color属性，只需要在接收输入值时做一层格式转换：如果传入的是预设色值名（比如blue、green），就自动拼接为var(--对应变量名)格式，传入的是合法色值则直接赋值即可。

• 方案2：TS层维护色值映射表
  不在CSS里做变量嵌套，直接在组件TS代码里维护预设色值的键值映射，接收到输入的color值后先查表，匹配到预设值就返回对应的真实色值，匹配不到就直接返回传入的自定义色值。这种方案的优势是逻辑更直观，不存在CSS变量嵌套解析的兼容问题，调试成本更低。
  示例代码：

  // 预设色值映射表
  const PRESET_COLORS = {
    blue: '#5dbbbb',
    green: '#286e22'
  } as const;
  
  @Input() color: keyof typeof PRESET_COLORS | string = 'blue';
  
  @HostBinding('style.--color') get resolvedColor() {
    // 命中预设值则返回对应色值，否则直接返回传入的自定义色值
    return PRESET_COLORS[this.color as keyof typeof PRESET_COLORS] ?? this.color;
  }
  

  原有CSS代码保持不变，外部调用组件时既可以传预设的色值名，也可以直接传自定义合法色值，都能正常渲染。

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