Angular 2、2.0.0-rc.2，无法使用样式指令应用内联css3转换 [英] Angular 2, 2.0.0-rc.2, Cannot apply inline css3 transform with style directive

问题描述

我正在尝试使用Angular 2样式指令和transform属性应用于DIV:

I am trying to apply to a DIV, using Angular 2 style directive, the transform property:

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

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

I get this warning in the console:

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没有得到应用.有什么主意吗?

The standard styles like width and background-color are applied. Trasnform does not get applied. Any idea?

推荐答案

更新:从Angular2 RC6开始，DomSanitizationService已重命名为DomSanitizer:https://stackoverflow.com/a/39462172/3481582

UPDATE: Angular2 RC6 onwards, DomSanitizationService has been renamed to DomSanitizer: https://stackoverflow.com/a/39462172/3481582

原始答案

由于我在下面提到的问题中没有找到所需的内容，因此我将在此处尝试回答.

As you didn't find what you needed in the question I mentioned bellow, I'll try to answer it here.

之所以无法设置style.transform，是因为angular具有清理过程，可以防止恶意代码被注入到您的应用程序中.

The reason why you aren't being able to set style.transform is because angular has a sanitize process that prevents malicious code to be injected into your application.

为了能够包含此样式，您必须告诉angular绕过此值.

In order to be able to include this style you'll have to tell angular to bypass this value.

首先将消毒剂注入组件构造器中

First inject the sanitizer in the component constructor

constructor(private sanitizer: DomSanitizationService) {}

然后，使用bypassSecurityTrustStyle函数告诉angular绕过所需的消毒过程样式.

Then, use the bypassSecurityTrustStyle function to tell angular to bypass the desired style of the sanitize process.

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

然后在您的模板中使用它

An then use it in your template

[style.transform]="safeTransform"

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

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

基本上与此完全相同的问题: 在RC.1中某些样式不能使用绑定语法添加的

Basically the exact same question as this: In RC.1 some styles can't be added using binding syntax

答案也在那里.

这篇关于Angular 2、2.0.0-rc.2，无法使用样式指令应用内联css3转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！