Angular：能否使用Renderer2添加内联CSS变量？

我明白你遇到的困扰了——想用Renderer2或者ngStyle添加内联CSS变量--expanded却没成功，Angular要么不认它是合法属性，要么渲染不出变量值。别担心，这几个方法能帮你搞定：

方法1：用Renderer2正确设置CSS变量 #

你之前可能用错了Renderer2的方法，其实setStyle是支持CSS变量的，直接把变量名作为属性名传入就行：

import { Component, Renderer2, ElementRef, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  template: '<div #myDiv>需要添加变量的元素</div>'
})
export class YourComponent implements OnInit {
  constructor(private renderer: Renderer2, private elRef: ElementRef) {}

  ngOnInit() {
    const targetDiv = this.elRef.nativeElement.querySelector('#myDiv');
    // 给元素设置--expanded变量，值可以是任意合法CSS值
    this.renderer.setStyle(targetDiv, '--expanded', '1'); // 或者'true'、'100%'等
  }
}

方法2：用[ngStyle]绑定CSS变量 #

用ngStyle的时候，要把CSS变量名用引号包裹作为键，这样Angular才能正确识别：

<!-- 静态值 -->
<div [ngStyle]="{'--expanded': 'true'}">内容</div>

<!-- 动态绑定组件里的变量 -->
<div [ngStyle]="{'--expanded': isExpanded ? 'true' : 'false'}">内容</div>

在组件里定义对应的变量：

isExpanded = true;

方法3：直接用[style.--变量名]绑定 #

这是最简洁的方式，Angular支持直接绑定CSS变量：

<!-- 静态值 -->
<div [style.--expanded]="'true'">内容</div>

<!-- 动态绑定 -->
<div [style.--expanded]="expandedState">内容</div>

组件里定义：

expandedState = 'false'; // 可以根据业务逻辑动态修改

这些方法都能让Angular正确渲染内联CSS变量，你可以根据自己的场景选择合适的方式～

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