时间戳

首页 > 解决方案 > Angular 7 - 向组件 SCSS 文件注入新的 CSS

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

问题描述

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

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

在打字稿中：

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

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

标签： angularsassangular7

解决方案

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

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

推荐阅读