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>`;
  }
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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