关于html：span通过innerHTML输入时不应用CSS样式


span doesn't apply css style when entered via innerHTML

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

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

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

我向组件添加了以下CSS：

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

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

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

1
2
    <div class="col-xs-12" id="JSONContainer"
        [innerHTML]="data | textHighlight:query">

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

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

span

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

enter image description here

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

编辑2：
这是相关的树：

enter image description here

为什么会这样呢？

如何使CSS样式适用？

谢谢！

相关讨论

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

您可以将CSS更改为：

::ng-deep div#JSONContainer span.highlightSpan

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

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

您可以阅读有关角度视图封装的更多信息。

相关讨论

在您的PIPE中，您必须导入

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

添加到构造函数

1
2
  constructor(private sanitizer: DomSanitizer) {
  }

在转换函数中返回

1
this.sanitizer.bypassSecurityTrustHtml('YOUR HTML');
相关讨论