Angular 2, 2.0.0-rc.2, kann nicht inline css3 mit Stil Richtlinie Transformation anwenden

Question

Ich versuche, ein DIV anzuwenden, Angular 2 Stil-Direktive, die Transformations Eigenschaft:

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

Die Komponente Daten:

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

bekomme ich diese Warnung in der Konsole:

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) 

die Standard-Stile wie Breite und Hintergrund-Farbe ein wieder angewendet. Trasnform wird nicht angewendet. Irgendeine Idee?

Answer 1

UPDATE: ab Angular2 RC6, wurde DomSanitizationService-DomSanitizer umbenannt: https://stackoverflow.com/a/39462172/3481582

Original-Antwort

Wie Sie nicht, was Sie in der Frage, die ich unten erwähnt benötigt das finden, ich Ich werde versuchen, es hier zu beantworten.

Der Grund, warum Sie style.transform nicht festlegen können, ist, weil eckle einen Bereinigungsvorgang hat, der verhindert, dass bösartiger Code in Ihre Anwendung injiziert wird.

Um diesen Stil aufnehmen zu können, müssen Sie angular angeben, um diesen Wert zu umgehen.

zuerst das Desinfektionsmittel in der Komponente Konstruktor einzuspritzen

constructor(private sanitizer: DomSanitizationService) {} 

Dann verwenden die Funktion bypassSecurityTrustStyle Winkel sagen den gewünschten Stil des Sanitize Prozesses zu umgehen.

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

An es dann in der Vorlage verwendet

[style.transform]="safeTransform" 

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

Im Grunde genau die gleiche Frage wie diese Referenzen: In RC.1 some styles can't be added using binding syntax

Die Antwort auch da ist.

Answer 2

Für die neueste Version von Angular 2 zum Zeitpunkt von diesem Post, Antwort @ Daniel Pliscki ist immer noch gültig, mit der Ausnahme, dass die richtige Service inject jetzt ist DomSanitizer

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

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

Und dann in Ihre Vorlage