Угловой 2-innerHTML стиль

Я получаю куски HTML-кодов из HTTP-вызовов. Я помещаю HTML-блоки в переменную и вставляю ее на свою страницу с помощью[innerHTML], но я не могу стилизовать вставленный HTML-блок. Кто-нибудь есть какие-либо предложения, как я мог бы достичь этого?

@Component({selector: 'calendar',
template: '<div [innerHTML]="calendar"></div>',
providers:[HomeService], 
styles: [` 
h3 {color:red;}
`})

HTML, который я хочу стиль является блок, содержащийся в переменной "календарь".

1 102
angularjs innerhtml

1 ответ:

обновление 2 ::slotted

::slotted теперь поддерживается всеми новыми браузерами и может использоваться с `ViewEncapsulation.ShadowDom

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

обновление 1 :: ng-deep

/deep/ был осужден и заменен на ::ng-deep.

::ng-deep также уже отмечен как устаревший, но пока нет замены.

, когда ViewEncapsulation.Native правильно поддерживается всеми браузерами и поддерживает стилизацию через границы теневого DOM,::ng-deep вероятно, будет прекращено.

оригинал

Angular добавляет все виды классов CSS в HTML, который он добавляет в DOM для эмуляции теневой инкапсуляции CSS DOM, чтобы предотвратить стили кровотечения из компонентов. Angular также переписывает CSS, который вы добавляете, чтобы соответствовать этим добавленным классам. Для HTML добавлено с помощью [innerHTML] эти классы не добавляются, и переписанный CSS не соответствует.

в качестве обходного пути попробуйте

  • для CSS добавлено в компонент
/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}
  • для CSS добавлено в index.html 
/* body /deep/ mySelector { */
body ::ng-deep mySelector {
  background-color: green;
}

>>> (эквивалент/deep/ но /deep/ работает лучше с SASS) и ::shadow добавлено в 2.0.0-бета.10. Они похожи на комбинаторы CSS shadow DOM (которые являются устаревшими) и работают только с encapsulation: ViewEncapsulation.Emulated который является значением по умолчанию в Angular2. Они, вероятно, также работают с ViewEncapsulation.None но игнорируются только потому, что они не нужны. Эти комбинаторы являются только промежуточным решением, пока не будут поддерживаться более продвинутые функции для кросс-компонентного стиля.

другой подход заключается в использовании

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
})

для всех компонентов, которые блокируют ваш CSS (зависит от того, где вы добавляете CSS и где HTML, что вы хотите стиль-может быть все компоненты в вашем приложении)

обновление

Пример Plunker

202