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

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

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

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

Обновить

Пример Плункер

Ответ 2

Если вы пытаетесь стилизовать динамически добавленные элементы HTML внутри компонента Angular, это может быть полезно:

// inside component class...

constructor(private hostRef: ElementRef) { }

getContentAttr(): string {
  const attrs = this.hostRef.nativeElement.attributes
  for (let i = 0, l = attrs.length; i < l; i++) {
    if (attrs[i].name.startsWith('_nghost-c')) {
      return '_ngcontent-c${attrs[i].name.substring(9)}'
    }
  }
}

ngAfterViewInit() {
  // dynamically add HTML element
  dynamicallyAddedHtmlElement.setAttribute(this.getContentAttr(), '')
}

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

Ответ 3

Удивительный @Trevor, отлично работающий над проектом Angular 7