根据角度变量生成动态CSS

在经历了不同的方法并尝试向angular应用程序的所有页面添加动态CSS之后，我得到了以下解决方案。

要求：根据API和API返回的值生成动态CSS，以更改设计和样式。

解决方案：

1. 创建一个新组件并创建一个服务以从API加载动态CSS变量。
2. 在模板文件中添加样式标签，并为属性使用变量值。
3. 在所有页面或主模板上加载此模板。
4. 在应用程序上，构建样式将移至head标签。

代码样例

import { CssService} from './Css.service';@Component({  selector: 'DynamicCss',  templateUrl: './DynamicCss.component.html',  styleUrls: ['./DynamicCss.component.scss']})export class ServiceProviderComponent implements onInit {    cssVariables: any;    constructor(private cssService:CssService){            }}

现在使用jquery或javascript来应用css，以借助如下功能附加css

appendCss(customData){     let text = '.custom-form-1 { background-image: url("`+customData.background_image+`");         }';     $(document).ready(function(){         $("style").append(text);      });}

然后像我一样从服务或其他变量加载自定义数据后调用此函数

ngOnInit

ngonInit(){ this.appendCss(this.customizeFormData);}

它使用jquery，但如果您不想在角度应用中使用jquery，也可以使用javascript / typescript完成