angular – 如何正确使用bypassSecurityTrustStyle

发布时间：2020-12-17 18:10:12 所属栏目：安全来源：网络整理

导读：我试图以Angular方式使用一些简单的CSS和 JavaScript示例. 改变元素背景颜色的简单JavaScript方法如下所示： this.container.style.backgroundColor = color; 颜色是在JavaScript中随机创建的. 模板看起来像这样： div id="container" (click)="changeColor(

我试图以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

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

解决方法

example plunker
正确使用bypassSecurityTrustStyle：

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

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

[style.background]="color"

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!