Angular 4：在应用中从json的自定义css应用样式

问题很简单：包含JSON（以编程方式）中指定的样式属性。Angular 4：在应用中从json的自定义css应用样式

JSON的领域是：

custom_css: "h1 { color:white; } #body-container.takeover .primary-color-bg{ background-color:#0092db; }"

我能想到一个主意，自定义变量的一个组成部分的“风格”属性。不工作

import { Component } from '@angular/core'; 
import { Service } from './services/json.service'; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    styles: this.customStyles // THIS 
}) 
export class AppComponent { 
    customStyles: Array<string> = []; 

    constructor(private service: Service) { 
    this.service.getJson().subscribe((data: any) => { 
     this.customStyles = data.custom_css; 
    }); 
    } 

}

任何想法如何在Angular 4中做到这一点？

来源

2017-10-07 zer0lis

我看到很多关于“如何动态加载样式”的问题。什么原因？为什么不为每个组件编写样式？ –

我只能说要求各不相同。当然，我可以做到这一点，但事实并非如此。在我的情况下，json有关于某些频道的信息，由用户个性化的频道。您需要检索关于他们如何在频道中对其工作区进行个性化的信息。长篇故事，但你得到的主要观点。 – zer0lis

如果你可以重写你的JSON：

custom_css:{ h1_color: "color:white", bodyContainer_background:" color:#0092db"}

和

import { Component } from '@angular/core'; 
import { Service } from './services/json.service'; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
     <--------- Nothing here 
}) 
export class AppComponent { 
    customStyles: Array<string> = []; 

    constructor(private service: Service) { 
    this.service.getJson().subscribe((data: any) => { 
     this.customStyles = data.custom_css; 
    }); 
    } 

}

，并在你的HTML：

把[ngStyle]="customStyles.h1_color"要添加的样式

。

来源

2017-10-07 19:18:20 Wandrille

谢谢你的回答，我确实尝试了一些启发你的想法。我没有成功。将进一步研究并发布我的结果。 – zer0lis

Angular 4：在应用中从json的自定义css应用样式

回答

相关问题