使用“innerHTML”时的角度 SCSS 变量

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;
}