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

【问题标题】：Angular 2, 2.0.0-rc.2, Cannot apply inline css3 transform with style directiveAngular 2、2.0.0-rc.2，无法使用样式指令应用内联 css3 转换
【发布时间】：2016-11-08 17:02:36
【问题描述】：

我正在尝试应用到 DIV，使用 Angular 2 样式指令，transform 属性：

<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。有什么想法吗？

【问题讨论】：

In RC.1 some styles can't be added using binding syntax的可能重复
@DanielPliscki 也许内容是一样的，但这个问题是可怕的。我在发帖前搜索了一下，没有发现任何关于这个问题的信息。
我已经用我的解决方案更新了答案。

标签： css angular transform

【解决方案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

答案也在那里。

【讨论】：

很好的答案，它正在工作。这个问题在 rc.2 上没有解决
请注意，DomSanitizationService 现在是 DomSanitizer。

【解决方案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"

【讨论】：