通过innerHTML输入时，span不适用CSS样式

Question

我有一个Angular应用程序，作为它的一部分，我在div（具有JSONContainer的ID）中显示查询结果。

我想突出显示结果中的特定查询，因此我使用了一个管道来搜索结果，并将文本中的FIELD：VALUE替换为：

g(n)≤c.f(n)

我在组件中添加了以下CSS：

<span class="highlightSpan">FIELD:VALUE</span>.

我也尝试在.highlightSpan下添加相同的样式，并获得相同的结果。

我使用包含存储整个JSON的'data'变量和存储查询的'query'变量，通过innerHTML在容器组件中插入此跨度和其余文本：

div#JSONContainer span.highlightSpan{
    background-color: rgba(28, 243, 28, 0.5) !important;
    color:red !important;
    padding: 1px;
    margin:1px;
}

（我不使用字符串插值，因为数据变量是json形状的，我使用html代码（例如html br标签）设置了样式，而字符串插值仅显示文本。

当我将鼠标指向google dev工具中的相关范围时，我看到创建了带有该类的范围：

但是css样式未应用，甚至在Google开发工具中也未显示：

编辑：我知道它没有显示（我从img中删除了它），但是跨度位于div＃JSONContainr中，如所述。

编辑2： 这是相关的树：

为什么会这样？

如何使CSS样式适用？

谢谢！

Answer 1

在您的PIPE中，您必须导入

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

添加到构造函数

  constructor(private sanitizer: DomSanitizer) {
  }

在转换函数返回中

this.sanitizer.bypassSecurityTrustHtml('YOUR HTML');

Answer 2

之所以发生这种情况，是因为您正在动态添加span元素，并且它不是组件的一部分，因此span元素未使用组件样式隔离进行修饰。探索以html格式呈现的组件时，您会看到每个元素都具有_ngcontent-c2之类的属性，但跨度却没有，因此它不是该组件样式的一部分。

您可以将CSS更改为：

::ng-deep div#JSONContainer span.highlightSpan

为组件的后代（其他动态添加的组件或元素）设置样式。或者，您可以将样式添加到全局样式中，这样它就不会成为组件隔离的一部分。

我创建了stackblitz demo来模拟您的情况。

您可以了解有关angular view encapsulation的更多信息。