Angular 2、2.0.0-rc.2，无法使用样式指令应用内联 css3 转换

Question

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

<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 )

应用了宽度和背景颜色等标准样式。未应用 Transform。有什么想法吗？

Answer 1

更新：Angular2 RC6 起，DomSanitizationService 已重命名为 DomSanitizer：

原答案

由于您在我下面提到的问题中没有找到您需要的内容，我将在这里尝试回答。

您无法设置 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

基本上是与此完全相同的问题：

答案也在那里

Answer 2

对于 Angular 2 的最新版本 post，@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，无法使用样式指令应用内联 css3 转换

Angular 2, 2.0.0-rc.2, Cannot apply inline css3 transform with style directive

css

transform

angular