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

Question

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

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

在 Tyescript 中：

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

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

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

Answer 2

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

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