提问者:小点点

基于角度变量的动态css生成


我正在用angular 4开发一个管理面板,并尝试集成一个部分来定制样式,比如change color、bg等。我已经开发了一个部分来保存数据库中的设置,使用API将它们作为json加载到应用程序中。

现在我正在尝试使用json中的值生成一个动态css,我尝试了主组件中的以下代码,但它不起作用

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

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

另一种方法是使用角度动画概念,但css将是巨大的,它不可能实现它的整体角度动画使用触发器和所有。我相信这是一个解决方案,因为这似乎是一个真正的需求,并且应该由许多其他开发人员做。

任何帮助都是值得注意的。

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


共1个答案

匿名用户

您可以使用ngStyle从JSON向页面中动态添加css。

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

同样的另一个例子可以是

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

在这里,我从json加载了背景图像

相关问题