如何正确使用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);
}

我创建了a plunker来证明这个问题。

使用纯JavaScript的正确行为显示为in the first example on this page

这样做的正确方法是什么？任何帮助将不胜感激。

Answer 1

example plunker 正确使用了bypassSecurityTrustStyle：

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

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

[style.background]="color"

Answer 2

我认为你需要像这样使用[styles]或[ngStyle]： -

<some-element [ngStyle]="{'font-style': styleExp}">...</some-element>

或

<some-element [styles]="myObj}">...</some-element>

模板组件myObj的位置为myObj = {color: 'red', font-size: '1.1em'}

[ngStyle] here

的文档