Angular组件中如何通过styleUrls加载指定CSS文件并提取CSS类至数组

好问题！首先得明确一点：你设想的通过this.styleUrls[1].cssRules访问样式表的方式是行不通的——因为@Component装饰器里的styleUrls只是编译时的配置数组，组件实例在运行时根本不会持有这个属性，它只是告诉Angular编译器要加载哪些样式文件，本身并不是实际的样式表对象。

那该怎么实现你的需求呢？这里有两种符合Angular最佳实践的方案，不会直接操作document这种反模式：

方案一：通过raw-loader导入CSS为字符串，正则提取类名 #

这是最直接且不依赖DOM的方法，核心思路是把CSS文件当作文本导入，然后用正则（或专业CSS解析库）提取所有类选择器。

步骤1：导入目标CSS文件为字符串 #

用Angular CLI内置的raw-loader，通过inline loader语法直接把CSS文件导入成字符串：

import { Component, OnInit } from '@angular/core';
// 用!!raw-loader!前缀强制将CSS文件转为字符串导入
import targetCss from '!!raw-loader!./the-file-i-want-to-iterate-through.css';
// 如果需要处理styleUrls里的所有文件，逐个导入即可
import componentScss from '!!raw-loader!./css-listcomponent.scss';

步骤2：提取类名并整理成数组 #

在组件里写一个方法，用正则匹配所有类选择器，去重后存入数组：

@Component({
  selector: 'css-list',
  templateUrl: './css-list.component.html',
  // 这里可以保留styleUrls，也可以移除——导入字符串只是获取文本，不会影响样式加载
  styleUrls: ['./css-listcomponent.scss', './the-file-i-want-to-iterate-through.css']
})
export class CssListComponent implements OnInit {
  cssClasses: string[] = [];

  ngOnInit() {
    this.extractAllCssClasses();
  }

  private extractAllCssClasses() {
    // 合并所有导入的样式文本
    const allStyleText = targetCss + componentScss;
    // 正则匹配所有类选择器（适配带连字符、下划线的类名）
    const classSelectorRegex = /\.[a-zA-Z0-9_-]+/g;
    const matchedClasses = allStyleText.match(classSelectorRegex);

    if (matchedClasses) {
      // 去掉类名开头的点，然后去重
      this.cssClasses = [...new Set(matchedClasses.map(cls => cls.slice(1)))];
    }
  }
}

步骤3：在模板中循环遍历 #

<div class="css-class-list">
  <h3>所有CSS类：</h3>
  <ul>
    <li *ngFor="let cls of cssClasses" class="{{ cls }}">
      {{ cls }}
    </li>
  </ul>
</div>

注意事项 #

• 正则的局限性：如果你的CSS里有复杂选择器（比如.class1.class2、.class:hover），上面的正则会把.class1、.class2、.class都匹配出来。如果需要更精准的解析，可以使用专业的CSS解析库（比如css npm包），它能解析CSS的AST（抽象语法树），准确提取所有独立的类选择器。
• 安装依赖：如果raw-loader不可用（Angular CLI默认已包含），可以手动安装：npm install raw-loader --save-dev

方案二：利用Angular样式封装特性（谨慎使用） #

如果你一定要通过CSSOM（CSS对象模型）获取样式表，那可以利用Angular组件样式的封装标记（比如[_nghost-xxx]属性选择器）过滤出当前组件的样式表，但这种方式还是会间接操作DOM，不推荐在SSR（服务端渲染）场景下使用：

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

@Component({
  selector: 'css-list',
  templateUrl: './css-list.component.html',
  styleUrls: ['./css-listcomponent.scss', './the-file-i-want-to-iterate-through.css']
})
export class CssListComponent implements OnInit {
  cssClasses: string[] = [];

  constructor(private el: ElementRef) {}

  ngOnInit() {
    // 获取当前组件的封装属性标记（比如_nghost-abc123）
    const hostAttr = this.el.nativeElement.getAttribute('nghost');
    if (!hostAttr) return;

    // 遍历所有样式表，找到包含当前组件封装标记的规则
    Array.from(document.styleSheets).forEach(sheet => {
      try {
        // 有些跨域样式表会抛出权限错误，需要捕获
        Array.from(sheet.cssRules).forEach(rule => {
          if (rule instanceof CSSStyleRule) {
            // 匹配包含组件封装标记的选择器，提取其中的类名
            const classMatches = rule.selectorText.match(/\.[a-zA-Z0-9_-]+/g);
            if (classMatches && rule.selectorText.includes(hostAttr)) {
              this.cssClasses.push(...classMatches.map(cls => cls.slice(1)));
            }
          }
        });
      } catch (e) {
        console.warn('无法访问跨域样式表:', sheet.href);
      }
    });

    // 去重
    this.cssClasses = [...new Set(this.cssClasses)];
  }
}

这种方法的问题在于依赖DOM，而且容易受到Angular版本更新的影响（封装标记的格式可能变化），所以优先推荐方案一。

总结 #

• 不能直接通过this.styleUrls访问样式表，因为它只是编译时配置；
• 推荐用raw-loader导入CSS字符串+正则/解析库提取类名的方式，符合Angular最佳实践；
• 可以提取styleUrls中所有文件的类名，只要逐个导入并合并文本即可。

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