span не применяет стиль css при вводе через innerHTML - PullRequest
Новая
       46

span не применяет стиль css при вводе через innerHTML

0 голосов
/ 24 октября 2018

У меня есть приложение Angular, и как его часть я показываю результат запроса в div (имеет идентификатор JSONContainer).

Я хотел выделить конкретный запрос внутри результата, поэтому я использовал конвейеркоторый ищет результаты и заменяет ПОЛЕ: ЗНАЧЕНИЕ в тексте на: 

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

Я добавил следующий компонент в компонент: 

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

Я попытался добавить тот же стиль вТакже .highlightSpan, с теми же результатами.

Я вставляю этот диапазон и остальную часть текста через innerHTML в содержащий компонент, используя переменную data, в которой хранится весь JSON, и запроспеременная, в которой хранится запрос: 

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

(я не использую строковую интерполяцию, потому что переменная данных имеет форму json, которую я стилизовала с использованием html-кода, такого как тег html br, а при интерполяции строки отображается только текст).

Когда я указываю своей мышью на соответствующий диапазон в инструментах Google Dev, я вижу, что диапазон с классом создан:

span

Но стиль CSSне применяется, и это даже не отображается в Google Dev Tools:

enter image description here

РЕДАКТИРОВАТЬ: я знаю, что это не показывает (я стер его с IMG), но диапазон находится в div # JSONContainr, как описано.

РЕДАКТИРОВАТЬ 2: Вот соответствующее дерево:

enter image description here

Почему это происходит?

Как применить стиль CSS?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 24 октября 2018

Это происходит потому, что вы добавляете элемент span динамически, и он не является частью вашего компонента, поэтому элемент span не украшен изоляцией стиля компонента.Когда вы исследуете свои компоненты, отображаемые в формате HTML, вы видите, что каждый элемент имеет атрибут, такой как _ngcontent-c2, но ваш диапазон не имеет, поэтому он не является частью стиля этого компонента.

Вы можете изменить свой CSS на:

::ng-deep div#JSONContainer span.highlightSpan

для стилизации потомков вашего компонента (другие компоненты или элементы добавляются динамически).Или вы можете добавить стиль к своему глобальному стилю, чтобы он не был частью изоляции этого компонента.

Я создал stackblitz demo для имитации вашей ситуации.

Вы можетеподробнее о инкапсуляция углового обзора .

0 голосов
/ 24 октября 2018

В вашу ТРУБУ вы должны импортировать 

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

Добавить в конструктор 

  constructor(private sanitizer: DomSanitizer) {
  }

В функции преобразования return 

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