Question

我有一个角度应用程序，它的一部分吐出了一段需要动态着色的文本，为此我在需要的地方注入了span元素并用一个类进行标记，因此输出为像这样的东西：

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

我正在使用一个td（它在表中），该td具有内部html绑定到该值。此类的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文件中，已由浏览器加载，并且名称输入正确。
我直接通过浏览器开发工具将color属性应用到了范围，它正确显示，文本的颜色发生了变化。
我尝试在字符串值中设置颜色而不是类，但是Angular为安全起见对此进行了清理。顺便说一句，它没有给我有关该班级的任何消毒信息。
我尝试通过浏览器开发工具应用其他类，但它们也没有改变颜色。

我是否不知道跨度不会反映通过类应用的颜色？您如何使它工作？

编辑

与这个问题无关，但是为了完整起见，这里是生成内容的代码：

 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 文件中，则该样式应该可以工作。

班级未应用角跨度颜色？

1 个答案: