通过 innerHTML 输入时，span 不应用 css 样式

Question

我有 Angular 应用程序，作为其中的一部分，我在 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;
}

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

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

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

（我没有使用字符串插值，因为数据变量是 json 形状，我使用 html 代码设置了样式，例如 html br 标签，并且字符串插值仅显示文本).

当我将鼠标指向 google 开发工具中的相关跨度时，我看到创建了具有 class 的跨度：

但是 css 样式没有应用，它甚至没有显示在 google 开发工具中：

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

编辑 2：这是相关的树：

为什么会这样？

如何应用css样式？

谢谢！

Answer 1

在您的 PIPE 中，您必须导入

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

添加到构造函数

  constructor(private sanitizer: DomSanitizer) {
  }

在变换函数中return

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

Answer 2

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

您可以将 css 更改为：

::ng-deep div#JSONContainer span.highlightSpan

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

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

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

通过 innerHTML 输入时，span 不应用 css 样式

span doesn't apply css style when entered via innerHTML

html

css

angular

innerhtml

angular-pipe