html - 类不应用 Angular 跨度颜色？

Question

我有一个 Angular 应用程序，它的一部分吐出一段需要动态着色的文本，为了做到这一点，我在需要的地方注入(inject)一个 span 元素并用一个类标记它，所以输出将是像这样:

Some text <span class="failResult">that's emphasized</span> and other text too.

我正在使用一个 td(它在一个表内)，它有内部 html 绑定(bind)到这个值。这个类的 css 非常简单。有几个类似的类根据计算值稍微改变外观，但它们看起来都像这样:

.failResult {
  color: #dd2222;
}

我得到的 html 正确显示了文本，但颜色没有显示在跨度内的部分上。

我尝试过的事情:

• 我使用开发工具查看输出并应用了类。这是浏览器输出的 td 示例:<td _ngcontent-c4="">17 Checks, 7 <span class="failResult">(61%)</span> Pass, 3 Fail, 5 Count/List, 2 Not Run</td>
• 我已验证该类存在于 css 文件中，已由浏览器加载，并且名称输入正确。
• 我直接通过浏览器开发工具将颜色属性应用于 span，它正确显示，文本颜色发生变化。
• 我尝试在字符串值中设置颜色而不是类，但是 Angular 出于安全考虑对其进行了清理。顺便说一下，它没有给我任何关于类(class)的 sanitizer 信息。
• 我尝试通过浏览器开发工具应用其他类，但它们也没有改变颜色。

有什么我不知道跨度不会反射(reflect)通过类应用的颜色吗？你如何让它发挥作用？

编辑

与这个问题没有太大关系，但为了完整起见，这里是生成内容的代码:

 GetReportSummary(): string {
    const values = [];

    values.push(`${this.TotalChecks} Checks`);
    if (this.PassingChecks > 0 || this.FailingChecks > 0) {
      let resultClass = 'passResult';
      if (this.PassPercent < 70) {
        resultClass = 'failResult';
      } else if (this.PassPercent < 90) {
        resultClass = 'warnResult';
      }
      values.push(`${this.PassingChecks} <span class="${resultClass}">(${this.PassPercent}%)</span> Pass`);
      values.push(`${this.FailingChecks} Fail`);
    }

    if (this.ReportingChecks > 0) {
      values.push(`${this.ReportingChecks} Count/List`);
    }

    if (this.NotRunChecks > 0) {
      values.push(`${this.NotRunChecks} Not Run`);
    }

    if (this.ErrorChecks > 0) {
      values.push(`<span class="errorResult">${this.ErrorChecks} Error</span>`);
    }

    return values.join(', ');
  }

Answer 1

这种行为是由于 Angular 使用封装将其样式范围限定到特定组件的方式。如果您将样式添加到元素的主 styles.css 文件中，那么它应该可以工作。