如何检测数组中是否包含带ng-star-inserted的复合CSS类名？

在Angular应用中，框架会自动给元素添加ng-star-inserted类。现有存储基础CSS类名的数组：

var footerElementClassList = [
      'footer-links__link',
      'social__link-icon',
      'bottom__link',
    ];

需要检测类似bottom__link ng-star-inserted的复合类是否匹配数组中的某个基础类，但你尝试的四种方案均未成功，原因及解决方法如下：

现有方案失败原因 #

• 方案1：Set的has()方法是严格匹配完整字符串，数组中不存在带空格的复合类，因此返回false。
• 方案2：函数内使用了赋值运算符=而非比较运算符===，逻辑错误；同时依然是匹配完整复合字符串，不符合需求。
• 方案3：数组没有contains()方法，正确方法应为includes()；且同样是匹配完整字符串，无法命中。
• 方案4：includes()严格匹配完整字符串，数组中无对应复合类，返回false。

正确解决方法 #

核心思路：复合类是基础类+ng-star-inserted的组合，需要验证两点：复合类包含ng-star-inserted，且其中的基础类存在于你的数组中。

方法1：处理复合类名字符串 #

var footerElementClassList = [
  'footer-links__link',
  'social__link-icon',
  'bottom__link',
];

function checkCompoundClass(compoundClassName) {
  const splitClasses = compoundClassName.split(' ');
  // 验证是否包含ng-star-inserted，且存在数组中的基础类
  return splitClasses.includes('ng-star-inserted') &&
         splitClasses.some(cls => footerElementClassList.includes(cls));
}

// 测试用例
console.log(checkCompoundClass('bottom__link ng-star-inserted')); // true
console.log(checkCompoundClass('footer-links__link ng-star-inserted')); // true
console.log(checkCompoundClass('random-class ng-star-inserted')); // false
console.log(checkCompoundClass('bottom__link')); // false

方法2：直接操作DOM元素的classList #

如果是从DOM元素获取类名，使用原生classListAPI更高效：

const targetElement = document.querySelector('.some-element');
const hasMatch = footerElementClassList.some(baseCls => targetElement.classList.contains(baseCls)) &&
                 targetElement.classList.contains('ng-star-inserted');

console.log(hasMatch); // 输出是否匹配

内容的提问来源于stack exchange，提问作者Surya R Praveen