Угловые переменные SCSS при использовании `innerHTML`

Question

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

<div [innerHTML]="myHTML | safeHtml"></div>

В сгенерированном HTML есть класс mainColour для одного из элементов. Однако при изменении цвета в моем приложении переменная обновляется, но элемент не отображается.

document.documentElement.style.setProperty('--primary-color', primary);

Если HTML-код вставляется непосредственно в компонент, вместо использования innerHTML, он работаетотлично.

Есть ли способ обеспечить работу переменных css с элементами, созданными как часть innerHTML?

Answer 1

Проблема в том, что в файле .scss перед именами классов необходимо добавить следующее:

:host ::ng-deep

Например:

$primary: var(--primary-color);
$secondary: var(--secondary-color);


:host ::ng-deep.primary-background {
  background-color: $primary;
}

:host ::ng-deep.secondary-background {
  background-color: $secondary;
}