Question

我在Angular 6中有以下代码：

long double

我从服务调用（即外部库）中获得了fma变量。它包含类名，例如<div [innerHtml]="content"></div>：

content

现在，我正在从AngularJS迁移此代码。在AngularJS中，我曾经在指令模板中操作p1之类的CSS类：

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

但是当我尝试在Angular 6组件样式表中执行相同操作时，我得到了p1。

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

更新请查看此StackBlitz，它不起作用，因为它在CSS中不接受.p1 { font-family: {{theFamily}}; }。这在AngularJS中有效。

Answer 1

您不能在Component 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;
}

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

1 个答案: