您可以使用 ngStyle 将 css 从 json 动态添加到您的页面。

<div [ngStyle]="{'color': variable ? 'red' : 'blue'}"></div>

另一个相同的例子可以是

 <div md-card-avatar [ngStyle]="{'background-image': 'url(' + post.avatar + ')', 'background-size': 'cover'  }"></div>

在这里，我从 json 加载了背景图像

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

您只能绑定style.color：

<div class="card" [style.color]="cardColor">lorem ipsum</div>

ngClass 用于设置变量值的动态类基础，如下所示

Ts 文件组件：

@Component ({
    selector:'simple-comp',
    template:`   <ol class="breadcrumb">
        <li *ngClass="{'active': step==='step1'}" (click)="step='step1; '">Step1</li>
        <li *ngClass="{'active': step==='step2'}"  (click)="step='step2'">Step2</li>
        <li *ngClass="{'active': step==='step3'}" (click)="step='step3'">Step3</li>
       </ol>`
})

export class SimpleComponent {
    public step: string = 'step1'; // change value like step1, step2, step3
}

HTML代码：

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">
 ...
</some-element>

我想动态设置嵌套在组件中的元素的样式（特别是http://tb.github.io/ng2-nouislider/），因此与 OP 类似，ngStyle 不适合。

我的方法是在我的模板 ( https://angular.io/api/core/ViewChild ) 中使用一个引用变量来访问组件的本机元素并使用 querySelector ( https://developer.mozilla .org/en-US/docs/Web/API/Document/querySelector）。

然后使用 Renderer 2 应用所需的样式。 下面和https://stackblitz.com/edit/angular-r3bs1d上的示例。

import { Component, Renderer2, ViewChild, AfterViewInit } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})

export class AppComponent implements AfterViewInit  {
    backgroundColour = '#ff0000';
    constructor(private renderer: Renderer2) { }
    @ViewChild('parent', { static: false }) parent;
    ngAfterViewInit(){
        this.renderer.setStyle(this.parent.nativeElement.querySelector('.child'), 'background', this.backgroundColour);
    }
}

HTML：

<div #parent>
    <div class="child">Child Element</div>
</div>

至少对于较小的样式更改，我认为这是一个可行的解决方案。