如何正确使用bypassSecurityTrustStyle

Question

我试图以Angular方式使用一些简单的CSS和JavaScript示例.

改变元素背景颜色的简单JavaScript方法如下所示:

this.container.style.backgroundColor = color;

颜色是在JavaScript中随机创建的.模板看起来像这样:

<div id="container"
  (click)="changeColor($event)"
  [style]="{'color': color}">
</div>

但是,这会产生以下错误:

WARNING: sanitizing unsafe style value [object Object] (see http://g.co/ng/security#xss).

使用此功能不起作用:

this.color = this.sanitizer.bypassSecurityTrustStyle(this.color);

创建一个函数也无法使用此样式[style.color] ="transform(color)"

transform(value) {
   return this.sanitizer.bypassSecurityTrustStyle(value);
}

我创建了一个plunker来演示这个问题.

使用纯JavaScript的正确行为显示在此页面的第一个示例中

这样做的正确方法是什么？任何帮助将非常感激.

Answer 1

该示例 plunker 正确使用了bypassSecurityTrustStyle：

 this.color = this.sanitizer.bypassSecurityTrustStyle(this.color);

但是，模板需要像这样设置值：

[style.background]="color"