Динамическое добавление тегов стиля к компоненту и повторная инкапсуляция стилей (angular) ⇐ CSS

[Anonymous]

Я работаю над обновлением AngularJS до Angular, и на данный момент у нас есть гибридное приложение, которое поставляется в комплекте с веб-пакетом, а не просто с angular cli. Это привело к проблемам, из-за которых мы не могли правильно объединить файлы CSS или scss и сделать их доступными из наших обновленных компонентов в styleUrls.
Поэтому мы добавляли стили в шаблон с тегами. Стили, которые необходимо добавить, выглядят следующим образом: (это всего лишь образец некоторых стилей)

Код: Выделить всё

const styles = `
tr.leader td,
tr.leader td .personPopup {
color: ${this.config.LeaderTextColor};
}

tr.leader td {
background-color: ${this.config.LeaderBackgroundColor};
}

tr.current-user td,
tr.current-user td .personPopup {
color: ${this.config.TableRowCurrentUserTextColor};
}
`

Цвета могут быть установлены пользователями во внешнем интерфейсе и загружены через нашу конфигурацию для индивидуального использования.
К сожалению, я не нашел способ, с помощью которого вы можете включить их в тег стиля в шаблоне и получить доступ к угловым переменным, например {{config.TableRowCurrentUserTextColor}}. Он не принимает правильное значение.
Итак, я работаю над этим, создавая тег стиля в компоненте и добавляя его в компонент в ngOnInit.

Код: Выделить всё

const myWidget = document.getElementById(this.widgetId) as HTMLElement;
myWidget.appendChild(styles);

Это работает и позволяет мне получить доступ к переменной конфигурации моего компонента, но когда стили загружаются таким образом через добавление, они не инкапсулируются должным образом с помощью инкапсуляции эмулированного представления, поэтому стили могут просочиться и влияют на другие компоненты.
Есть ли способ получить доступ к этим переменным компонента из тегов стиля в шаблоне? Я не нашел работающего способа... Или есть способ заставить компонент повторно инкапсулировать себя и повторно оценить стили, чтобы инкапсулировать их после их добавления?

Подробнее здесь: https://stackoverflow.com/questions/783 ... tyles-angu