Question

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

下面给出

config作为从http请求获取的配置结构的示例。

例如;

＆＃13;

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

＆＃13;

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

＆＃13;

有任何关于让这个工作或替代方法的想法吗？

Answer 1

angular不会将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>

Angular 2

1 个答案: