在 Angular 6 中动态更改样式类属性

Question

我在 Angular 6 中有以下代码：

<div [innerHtml]="content"></div>

我从服务调用（即外部库）中获得了 content 变量。它包含类名，例如p1：

var content = '<p class="p1">This is some text</p>';

现在，我正在从 AngularJS 迁移这段代码。在 AngularJS 中，我曾经在指令模板中操作像 p1 这样的 css 类：

.p1 {
   font-family: {{theFamily}};
}

但是当我尝试在 Angular 6 组件样式表中做同样的事情时，我得到了Module build failed: Syntax Error。

任何想法如何获得相同的结果？

更新 请看这个StackBlitz，它不起作用，因为它不接受css中的{{ }}。这在 AngularJS 中有效。

Answer 1

您不能在组件 scss 中使用角度绑定。它应该只在模板中使用。您可以使用 [ngStyle] 调用组件函数并将 css 属性作为对象返回。

模板：

<div [ngStyle]="getStyles()">This is test</div>

getStyles(){
    let styles = {
    'background-color': this.isExpired ? 'red' : 'transparent',
    'font-weight': this.isImportant ? 'bold' : 'normal'
  };
  return styles;
}