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

span doesn't apply css style when entered via innerHTML

我有 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样式?

谢谢!

在您的 PIPE 中,您必须导入

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

添加到构造函数

  constructor(private sanitizer: DomSanitizer) {
  }

在变换函数中return

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

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

您可以将 css 更改为:

::ng-deep div#JSONContainer span.highlightSpan

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

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

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