Angular 2中的动态组件选择和样式

Question

我有一个Angular应用程序，它加载配置.json文件。基本上我想要做的是动态选择组件，并将内联样式添加到元素。

配置在下面给出，作为从http请求获取的配置结构的示例。

例如;

var config = [ 
 
    { 
 
    name: "header-component", 
 
    styles: "margin:0;padding:0;background:black" 
 
    } 
 
]

<div *ngFor="let conf of config"> 
 
    <{{conf.name}} style="{{conf.styles}}"></{{conf.name}}> 
 
</div>

任何想法是在得到这个工作，或另一种方法？

Answer 1

角度不绑定var变量为dom。使用这样的

config :{ name: string, styles: string }[]= [ 
    { 
    name: "header-component", 
    styles: "margin:0;padding:0;background:black" 
    } 
] 

更新

您可以创建一个@pipe并绑定HTML。像这样修改json。

config :{ name: string, styles: string, html : string }[]= [ 
     { 
     name: "header-component", 
     styles: "margin:0;padding:0;background:black", 
     html : "<{{conf.name}} ngStyle='[conf.styles]'></{{conf.name}}>" 
     } 
] 

这个管道添加到您的代码

@Pipe({name: 'safeHtml'}) 
export class Safe { 
    constructor(private sanitizer:Sanitizer){} 

    transform(style) { 
    return this.sanitizer.bypassSecurityTrustStyle(style); 
    // return this.sanitizer.bypassSecurityTrustHtml(style); 
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs 
    } 
} 

通话管在html

<div *ngFor="let conf of config"> 
    <div [innerHTML]="conf.html | safeHtml"></div> 
</div>