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

【问题标题】：Angular 7 - Inject new CSS to Component SCSS fileAngular 7 - 向组件 SCSS 文件注入新的 CSS
【发布时间】：2020-04-02 01:21:13
【问题描述】：

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

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

在 Tyescript 内：

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

如何将新类（在本例中为 foobar）动态添加到组件 scss 文件中？请注意，类名每次都可以不同，所以我不能硬编码它

【问题讨论】：

【解决方案1】：

您可以像这样使用[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}`
      }
}

【讨论】：

【解决方案2】：

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

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

【讨论】：