根据变量angular生成动态css [英] Generate dynamic css based on variables angular

问题描述

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

I am working on a admin panel developed with angular 4 and trying to integrate a sections to customize styling like change color, bg etc. I already have developed a sections to save settings in database got them on app load as json using API.

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

Now I am trying to generate a dynamic css using values from json, I tried with following code in main component but its not working

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

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

I am not sure how I should load the css values in component and use them in style tag. I didnt find any other solution for same.

另一种方法是使用角度动画概念，但 css 将是巨大的，它不可能使用触发器和所有的角度动画来实现它.我相信有一个解决方案，因为它似乎是一个真正的要求，应该由许多其他开发人员完成.

Another way is to use angular animation concept but the css is going to be huge and its not possible to implements it whole with angular animation using triggers and all. I believe there is a solution for this as it seems a genuine requirements and should have done by lots of other developers.

任何帮助都是可观的.

不能使用 ngStyle，因为它将应用于几乎所有元素，因为它适用于整个应用程序，而不仅仅是特定元素.

Edit : can not use ngStyle as its going to be applied on almost all elements as its for whole application and not only for specific element.

推荐答案

angular 中可用的直接方法是使用 ngstyle 如下

Direct approach available in angular is using ngstyle as follows

<div [ngStyle]="{'color': style.colorVal ? style.colorVal : '#000', 'font-size' : style.fontSize ? style.fontSize : '16px' }"></div>

在通过不同的方法并尝试将动态 css 添加到 angular 应用程序的所有页面后，我最终得到了以下解决方案.

After going through different methods and approached to add dynamic css to all pages on angular app I ended up with following solutions.

要求:根据 API 返回的值生成动态 css 以更改设计和样式.

Requirement : generate dynamic css based on values returned from and API to change design and styling.

解决方案:

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){
        /* call the service/api to get the css variable values in cssVariables */

    }
}

现在使用 jquery 或 javascript 应用 css 以在如下函数的帮助下附加 css

Now apply css using jquery or javascript to append css with help of function like following

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

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

and call this function after loading custom data from service or other variable like I did it ngOnInit

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

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

Its using jquery but can be done with javascript/typescript as well if you dont want to use jquery in your angular app

其他有用的资源 https://github.com/angular/angular/issues/9343#issuecomment-312035896

这篇关于根据变量angular生成动态css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！