Angular 7 - 将新的 CSS 注入组件 SCSS 文件

Question

假设我在 DOM 中动态注入新的 HTML。

<div [innerHTML]="htmlCode | sanitizeHtml">
...
</div>

在 Tyescript 中：

htmlCode : string = '<svg class = "foobar"'>....'

如何动态添加新的 class（在本例中为 foobar）到组件 scss 文件？请注意，class 名称每次都可能不同，因此我无法将其硬编码为

Answer 1

您可以将它添加到您的组件中，并在您的 scss 文件中添加您想要的任何样式

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

Answer 2

您可以像这样使用 [ngClass] 设置 class：

<div [innerHTML]="htmlCode | sanitizeHtml" [ngClass]="dynamicClass">
...
</div>

然后在你的ts文件中：

htmlCode : string = '<svg class = "foobar"'>....'
dynamicClass: string = 'yourClassName';

最后，如果要动态设置样式，可以这样使用[ngStyle]：

<div [innerHTML]="htmlCode | sanitizeHtml" [ngClass]="dynamicClass" [ngStyle]="dynamicStyle">
...
</div>

然后在你的ts文件中：

htmlCode : string = '<svg class = "foobar"'>....'
dynamicClass: string = 'yourClassName';
dynamicStyle: string = {
    'color': 'red'
  }

如果你想使用参数或变量来设置样式属性你可以这样做：

setCustomColor(color: string): {
      dynamicStyle: string = {
        'color': `${color}`
      }
}

Angular 7 - Inject new CSS to Component SCSS file