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

问题

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>

The component data is:

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 )

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

回答1:

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

Original Answer

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

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.

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

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 documentation references https://angular.io/docs/ts/latest/guide/security.html#!#bypass-security-apis

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

The answer is also there.

回答2:

For the latest version of Angular 2 at the time of this post, @Daniel Pliscki's answer is still valid, except that the proper service inject is now DomSanitizer

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

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

And then in your template

[style.transform]="transformStyle"

来源：https://stackoverflow.com/questions/38227480/angular-2-2-0-0-rc-2-cannot-apply-inline-css3-transform-with-style-directive

标签

css3

angular

transform