angular - 如何正确使用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

我认为你需要使用 [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