kątowa 2, 2.0.0-rc.2, nie można zastosować inline CSS3 przekształcić z dyrektywą stylu

Question

staram się stosować do DIV, stosując dyrektywę kątowa 2 styl, przekształcenia nieruchomości:

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

Komponent danych:

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

mogę tego ostrzeżenia w konsoli:

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) 

standardowe style takie jak szerokość i background-color a ponownie zastosowany. Trasnform nie zostanie zastosowany. Dowolny pomysł?

Answer 1

UPDATE: Angular2 RC6 r DomSanitizationService została zmieniona na DomSanitizer: https://stackoverflow.com/a/39462172/3481582

Original Odpowiedź

Jak można nie znaleźć to, czego potrzeba w kwestii wspomniałem ryk, I” Spróbuję odpowiedzieć na to tutaj.

Powodem, dla którego nie można ustawić pliku style.transform, jest to, że kątowy ma proces dezynfekcji, który zapobiega wprowadzaniu złośliwego kodu do aplikacji.

Aby móc uwzględnić ten styl, musisz powiedzieć kątowi, aby pominąć tę wartość.

pierwsze wtryskiwanie Sanitizer w konstruktora składnika

constructor(private sanitizer: DomSanitizationService) {} 

Następnie za pomocą funkcji bypassSecurityTrustStyle powiedzieć kątowe ominąć żądany styl procesu zdezynfekować.

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

następnie używać go w szablonie

[style.transform]="safeTransform" 

kątowa dokumentacja odwołuje https://angular.io/docs/ts/latest/guide/security.html#!#bypass-security-apis

zasadzie dokładnie to samo pytanie jak to: In RC.1 some styles can't be added using binding syntax

Odpowiedź jest również tam.

Answer 2

Dla najnowszej wersji kątowej 2 w czasie tego postu, odpowiedź @Daniel Pliscki jest nadal ważna, chyba że właściwa inject usługa jest teraz DomSanitizer

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

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

A następnie w Twój szablon