Question

我正在尝试使用Angular 2样式指令应用于DIV，转换属性：

<div
     [style.width.px]="front.width"
     [style.height.px]="front.height"
     [style.background-color]="front.backgroundColor"
     [style.transform]="front.transform"></div>

组件数据是：

front['width'] = this.width + this.gapw;
front['height'] = this.height + this.gaph;
front['background-color'] = settings.backfacesColor;
front['transform'] = 'rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, ' + hw + 'px )';

我在控制台中收到此警告：

WARNING: sanitizing unsafe style value rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, 207px )
browser_adapter.js:83 WARNING: sanitizing unsafe style value rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, 207px )
browser_adapter.js:83 WARNING: sanitizing unsafe style value rotate3d( 0, 1, 0, 180deg ) translate3d( 0, 0, 207px ) rotateZ( 180deg )

应用宽度和背景颜色等标准样式。 Trasnform不会被应用。有什么想法吗？

Answer 1

更新：Angular2 RC6以上，DomSanitizationService已重命名为DomSanitizer：https://stackoverflow.com/a/39462172/3481582

原始答案

由于你在我提到的问题中找不到所需的内容，我将在这里尝试回答。

您无法设置style.transform的原因是因为angular具有清理过程，可防止将恶意代码注入您的应用程序。

为了能够包含这种风格，你必须告诉angular绕过这个值。

首先在组件构造函数中注入清洁剂

constructor(private sanitizer: DomSanitizationService) {}

然后，使用bypassSecurityTrustStyle函数告诉angular绕过所需的清理过程样式。

this.safeTransform = sanitizer.bypassSecurityTrustStyle("rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, ' + hw + 'px )")

然后在模板中使用它

[style.transform]="safeTransform"

Angular文档参考 https://angular.io/docs/ts/latest/guide/security.html#!#bypass-security-apis

基本上与此完全相同的问题： In RC.1 some styles can't be added using binding syntax

答案也在那里。

Answer 2

对于本帖子发布时Angular 2的最新版本，@ Daniel Pliscki的答案仍然有效，除了正确的服务注入现在是DomSanitizer

https://angular.io/docs/ts/latest/guide/security.html#!#bypass-security-apis

constructor(private: sanitizer:DomSanitizer) {}
ngOnInit() {
  this.transformStyle = this.sanitizer.bypassSecurityTrustStyle('....');
}

然后在你的模板中

[style.transform]="transformStyle"

Angular 2,2.0.0-rc.2，无法使用样式指令

2 个答案: