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

问题描述

我正在使用用angular 4开发的管理面板，并尝试集成一个部分以自定义样式，例如更改颜色，bg等. 我已经开发了一个节来将设置保存在数据库中，并使用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值并在style标签中使用它们.我没有找到其他解决办法.

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.

任何帮助都是有意义的.

Any help is appreciable.

不能使用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.

推荐答案

在经历了不同的方法并试图将动态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，但如果您不想在角度应用程序中使用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

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