it-swarm.com.ru

стиль не работает для innerhtml в Angular 2 Typescript

Я передаю HTML как innerHtml на мой взгляд. Ниже мое мнение

<div [innerHTML]="someHtmlCode"></div>

если я передам приведенный ниже код, он работает нормально.

this.someHtmlCode = "<div><b>This is my HTML.</b></div>"

если я передаю код ниже, который содержит цвет, он не работает.

 this.someHtmlCode = '<div style="background-color: blue;"><b>This is my HTML.</b></div>';
18
Chatra

Такое поведение, которое вы получаете, является нормальным. Класс, добавленный в innerHTML, игнорируется, потому что по умолчанию инкапсуляция - Emulated. Это означает, что Angular предотвращает перехват стилей внутри и снаружи компонента . Вы должны изменить инкапсуляцию на None в своем компоненте . Таким образом, вы сможете определять классы где угодно: внутри styles или в отдельная таблица стилей .css, .scss или .less (это не имеет значения), и Angular автоматически добавит их в DOM. 

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'example',
  styles: ['.demo {background-color: blue}'],
  template: '<div [innerHTML]="someHtmlCode"></div>',
  encapsulation: ViewEncapsulation.None,
})
export class Example {
  private someHtmlCode = '';

  constructor() {
    this.someHtmlCode = '<div class="demo"><b>This is my HTML.</b></div>';
  }
}
46
Unsinkable Sam

Я также столкнулся с той же проблемой, но после прочтения этой ссылки ниже, я нашел решение, и это было сделано без использования труб

Надеюсь, что это поможет вам.

https://netbasal.com/angular-2-security-the-domsanitizer-service-2202c83bd90

7
Shehram Tahir

Вместо встроенного стиля я помещаю стиль в класс.

Не уверен, что использование class является вариантом для вас или нет, но вот Plunker demo

HTML:

this.someHtmlCode = '<div class="demo"><b>This is my HTML.</b></div>'

CSS:

.demo{
    background-color: blue;
}
0
Nehal