javascript - 根据变量angular生成动态css

Question

我正在使用 angular 4 开发一个管理面板，并尝试集成一个部分来自定义样式，如更改颜色、背景等。 我已经开发了一个部分来保存数据库中的设置，使用 API 将它们作为 json 加载到应用程序上。

现在我正在尝试使用来自 json 的值生成动态 css，我尝试在主要组件中使用以下代码但它不起作用

@Component({
      templateUrl: 'card.html',
      styles: [`
        .card {
          height: 70px;
          width: 100px;
          color: {{css.cardColor}};
        }
      `],
})

我不确定应该如何在组件中加载 css 值并在样式标签中使用它们。我没有找到任何其他解决方案。

另一种方法是使用 Angular 动画概念，但 css 将变得巨大，并且不可能使用触发器和所有的 Angular 动画来实现它。我相信有一个解决方案，因为它看起来是一个真正的需求，应该由许多其他开发人员完成。

任何帮助都是可观的。

编辑:不能使用 ngStyle，因为它要应用于几乎所有元素，因为它适用于整个应用程序，而不仅仅是特定元素。

Answer 1

您可以使用 ngStyle 将 css 从 json 动态添加到您的页面。

<div [ngStyle]="{'color': variable ? 'red' : 'blue'}"></div>

另一个例子:

 <div md-card-avatar [ngStyle]="{'background-image': 'url(' + post.avatar + ')', 'background-size': 'cover'  }"></div>

这里我从 json-data 加载了背景图片。