Как применить эмулированные атрибуты инкапсуляции Angular к элементам HTML, динамически добавляемым к компоненту Angular?

Question

У меня есть пользовательский угловой компонент, к которому динамически добавляется элемент HTML сторонней библиотекой, которую я использую внутри углового компонента.Конкретная сторонняя библиотека не имеет значения, потому что я ищу решение, которое будет работать с различными сторонними библиотеками.

Я хотел бы применить / добавить к этим динамически добавленным HTML-элементам эмулируемые angular-ыатрибуты инкапсуляции (например, _ngcontent-c1).Я бы предпочел официальный метод, если он существует (я не смог найти такой метод), или что-то достаточно надежное в противном случае.

Answer 1

Вот неофициальный метод, который я нашел для этого:

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(), '')
}

ПРИМЕЧАНИЕ. Это позволяет стилизовать динамически добавляемый элемент HTML.

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

Было бы неплохо, если бы Angular выставил функцию, подобную getContentAttr, которая немного абстрагировала внутреннюю реализацию.