根据角度变量生成动态CSS

小编典典

根据角度变量生成动态CSS

css

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

现在我正在尝试使用json的值生成动态CSS，我尝试在主要组件中使用以下代码，但无法正常工作

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

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

另一种方法是使用角度动画概念，但是css将会非常庞大，并且不可能使用触发器和全部通过角度动画整体实现它。我认为有一个解决方案，因为这似乎是真正的要求，并且应该由许多其他开发人员来完成。

任何帮助都是可观的。

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

阅读 350

2020-05-16

共1个答案

小编典典

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

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

解决方案：

创建一个新组件并创建一个服务以从API加载动态CSS变量。
在模板文件中添加样式标签，并为属性使用变量值。
在所有页面或主模板上加载此模板。
在应用程序上，构建样式将移至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

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完成

2020-05-16