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

Question

我有一个 Angular 应用程序加载配置 .json 文件。本质上我想做的是动态 select 组件并向元素添加内联样式。

下面给出了配置作为从 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

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 中的动态组件选择和样式

Dynamic component selection and styling in Angular 2

typescript

angular2-components

angular