基于变量angular生成动态css

Question

我正在开发一个使用 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 许可协议

Answer 1

Angular 中可用的直接方法是使用 ngstyle，如下所示

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

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

要求：根据返回的值和 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){
        /* 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，但如果您不想在 Angular 应用程序中使用 jquery，也可以使用 javascript/typescript 来完成

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

原文由 Vikram 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于后台使用，颜色使用 JSON 方法：

 <ion-list-header class="background-size"
[ngStyle]="{'background-image': 'url(' + data.headerImage + ')'}"
*ngIf="data.headerImage != null">

原文由 Fahimeh Ahmadi 发布，翻译遵循 CC BY-SA 4.0 许可协议