我正在开发一个用 Angular 4 开发的管理面板,并尝试集成一个部分来自定义样式,例如更改颜色、背景等。
我已经开发了一个部分来保存数据库中的设置,并使用 API 将它们作为 json 加载到应用程序中。
现在我尝试使用 json 中的值生成动态 css,我尝试在主组件中使用以下代码,但它不起作用
@Component({
templateUrl: 'card.html',
styles: [`
.card {
height: 70px;
width: 100px;
color: {{css.cardColor}};
}
`],
})
我不确定应该如何在组件中加载 css 值并在样式标签中使用它们。我没有找到任何其他解决方案。
另一种方法是使用角度动画概念,但 CSS 将会很大,并且不可能使用触发器等通过角度动画来整体实现它。我相信有一个解决方案,因为这似乎是真正的要求,并且应该由许多其他开发人员完成。
任何帮助都是值得赞赏的。
编辑:不能使用 ngStyle,因为它将应用于几乎所有元素,因为它适用于整个应用程序,而不仅仅是特定元素。
您可以使用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 加载了背景图像。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)