Span通过innerHTML输入时不应用css样式 [英] span doesn't apply css style when entered via innerHTML

问题描述

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

我想突出显示结果中的特定查询，所以我使用了一个搜索结果的管道，并将文本中的field：Value替换为：

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

我向组件添加了以下css：

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

我也尝试在.Highlight tSpan下添加相同的样式，结果相同。

我使用存储整个JSON的‘data’变量和存储查询的‘Query’变量，通过innerHTML在包含组件中插入此范围和文本的其余部分：

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

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

当我将鼠标指向Google dev工具中的相关范围时，我看到包含类的范围已创建：

但没有应用css样式，甚至没有在Google dev工具中显示：

编辑：我知道它没有显示(我已将其从img中删除)，但如所述，范围位于div#JSONContainr中。

编辑2： 以下是相关的树：

为什么会发生这种情况？

如何应用CSS样式？

谢谢！

推荐答案

发生这种情况是因为您正在动态添加span元素，而它不是组件的一部分，因此span元素没有使用组件样式隔离进行装饰。当您浏览呈现为html组件时，您会看到每个元素都有类似_ngcontent-c2的属性，但您的范围没有，因此它不是组件样式的一部分。

您可以将您的css更改为：

::ng-deep div#JSONContainer span.highlightSpan

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

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

您可以阅读有关angular view encapsulation的更多信息。

这篇关于Span通过innerHTML输入时不应用css样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！