1

День добрый, нужна помощь. Асинхронный запрос, приходит объект свойство которого текст в тегах. Помещаю для отображения в темплейт.

<div class="some_class" [innerHTML]="something"></div>

Теперь нужно применить для него какие то стили в css файле.

.some_class {
display:inline-block
}

Не видит, все аналогичные классы на странице видят, то что помещено с помощью innerHTML не видит. Но нормально отрабатывает та разметка которая есть в нем. Angular2 если это поможет конечно.

1

1 ответ 1

2

Это связано со спецификой работы innerHtml и инкапсуляцией angular 2

1 Способ

Подключить файл css через <link rel="stylesheet" href="путь к файлу"></link> и задать в нем нужные классы, которые имеются в innerHtml. То есть делаем как в любом проекте.

2 Способ

Задать стили с помощью :host >>> .class.

В примере ниже имеется некий блок <div [innerHTML]="someHtml"></div> в который будет вставляться некий HTML

 <p class="styleP1">Hello</p>
 <p class="styleP2">Hello</p>

с классами .styleP1, .styleP2.

К первому <p class="styleP1">Hello</p> стиль не применится, потому что он не задан через :host, второй же <p class="styleP2">Hello</p> окрасится в красный цвет.

 @Component({
  selector: 'my-app',
  template: `
    <div>
      <div [innerHTML]="someHtml"></div>
    </div>
  `,
  styles: [
    `:host >>> .styleP2 { color: red; }
    .styleP1, .styleP2 { color: red; }`
  ],
 })
 export class App {
  constructor() {
    this.someHtml = `<p class="styleP1">Hello</p>
      <p class="styleP2">Hello</p>`;
  }
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.