Angular组件style标签字符串插值无效，如何实现特定类动态样式？

哈哈，这个坑我之前也踩过！Angular确实不支持在组件的<style>标签里直接用插值表达式{{}}来绑定动态值，因为模板解析的时候不会处理<style>里的插值。不过别担心，有好几种靠谱的方法能实现你要的动态样式效果，给你列出来：

方法一：用ngStyle直接绑定元素样式 #

如果只是给特定元素动态设置单个或少量样式，ngStyle是最直接的选择，它能把组件属性和元素样式直接绑定，属性变化时样式自动更新：

@Component({
  selector: 'app-style',
  template: `
    <div [ngStyle]="{ color: textColor }" class="test">这是测试文本</div>
  `
})
export class StyleComponent {
  textColor = "red";
}

方法二：动态切换预定义CSS类（适合多样式场景） #

要是你有好几组样式需要切换，预先定义好不同的CSS类，再用ngClass或者直接绑定class属性来切换会更清晰：

@Component({
  selector: 'app-style',
  template: `
    <!-- 直接绑定类名 -->
    <div [class]="activeTextClass" class="test">基础切换示例</div>
    <!-- 用ngClass做条件判断，更灵活 -->
    <div [ngClass]="{ 'text-red': isRedTheme, 'text-blue': !isRedTheme }" class="test">条件切换示例</div>
  `,
  styles: [`
    .text-red { color: red; font-weight: bold; }
    .text-blue { color: blue; font-style: italic; }
  `]
})
export class StyleComponent {
  activeTextClass = "text-red";
  isRedTheme = true;
}

方法三：借助CSS变量（自定义属性） #

Angular支持绑定CSS变量，这种方式能让你在组件的<style>里引用动态值，完美贴合你最初想直接操作类样式的需求：

@Component({
  selector: 'app-style',
  template: `
    <div [style.--test-text-color]="textColor" class="test">这是测试文本</div>
  `,
  styles: [`
    .test {
      color: var(--test-text-color);
      /* 还可以绑定更多变量，比如字体大小、背景色等 */
      /* font-size: var(--test-font-size); */
    }
  `]
})
export class StyleComponent {
  textColor = "red";
}

方法四：用Renderer2在组件类中动态修改样式 #

如果需要在业务逻辑里（比如异步请求完成后）动态调整样式，Angular的Renderer2服务是更安全的DOM操作方式（比直接操作原生DOM更符合Angular的最佳实践）：

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

@Component({
  selector: 'app-style',
  template: `
    <div class="test">这是测试文本</div>
  `
})
export class StyleComponent implements OnInit {
  textColor = "red";

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnInit() {
    // 获取目标元素
    const testElement = this.el.nativeElement.querySelector('.test');
    // 设置单个样式
    this.renderer.setStyle(testElement, 'color', this.textColor);
    // 也可以添加/移除预定义的CSS类
    // this.renderer.addClass(testElement, 'text-red');
  }
}

内容的提问来源于stack exchange，提问作者S. Johnson