我正在开发一个使用 angular 4 开发的管理面板,并尝试集成一个部分来自定义样式,如更改颜色、bg 等。我已经开发了一个部分来将设置保存在数据库中,让它们在应用程序加载时使用 API 作为 json。
现在我正在尝试使用来自 json 的值生成动态 css,我尝试在主要组件中使用以下代码,但它不起作用
@Component({
templateUrl: 'card.html',
styles: [`
.card {
height: 70px;
width: 100px;
color: {{css.cardColor}};
}
`],
})
我不确定我应该如何在组件中加载 css 值并在样式标签中使用它们。我没有找到任何其他解决方案。
另一种方法是使用角度动画概念,但 css 将是巨大的,并且不可能使用触发器和所有的角度动画来实现它。我相信有一个解决方案,因为这似乎是一个真正的要求,应该由许多其他开发人员完成。
任何帮助都是可观的。
编辑:不能使用 ngStyle 因为它将应用于几乎所有元素,因为它适用于整个应用程序,而不仅仅是特定元素。
原文由 Vikram 发布,翻译遵循 CC BY-SA 4.0 许可协议
Angular 中可用的直接方法是使用 ngstyle,如下所示
在经历了不同的方法并试图将动态 CSS 添加到 Angular 应用程序的所有页面之后,我最终得到了以下解决方案。
要求:根据返回的值和 API 生成动态 css 以更改设计和样式。
解决方案 :
代码示例
现在使用 jquery 或 javascript 应用 css 来附加 css 并借助如下功能
并在从服务或其他变量加载自定义数据后调用此函数,就像我这样做
ngOnInit
它使用 jquery,但如果您不想在 Angular 应用程序中使用 jquery,也可以使用 javascript/typescript 来完成
其他有用的资源 https://github.com/angular/angular/issues/9343#issuecomment-312035896