Eğik 2, 2.0.0-rc.2, satır içi css3 tarzı direktifi

Question

Ben Açısal 2 stil yönergesini kullanarak, bir DIV için geçerli çalışıyorum ile dönüşümü uygulanamıyor, dönüşüm özelliği:

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

bileşeni veridir: genişlik ve background-color a gibi

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) 

standart stilleri:

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

ben konsolda bu uyarıyı almak uygulandı. Trasnform uygulanmaz. Herhangi bir fikir?

Answer 1

GÜNCELLEME: Angular2 RC6 itibaren, DomSanitizationServiceDomSanitizer yeniden adlandırıldı: https://stackoverflow.com/a/39462172/3481582

Orijinal Cevap

Eğer ben feryat söz konusu gerekli bulamadık gibi, ben Burada cevap vermeye çalışacağım.

Stil.transformunu ayarlayamamanızın sebebi, açısal uygulamanın uygulamanıza kötü amaçlı kodun enjekte edilmesini önleyen bir sterilizasyon işlemine sahip olmasından kaynaklanır.

Bu stili ekleyebilmeniz için bu değeri atlamak için açısal olduğunu söylemeniz gerekir.

İlk olarak, Sonra bileşen kurucu

constructor(private sanitizer: DomSanitizationService) {} 

sanitizer enjekte sterilize işleminin istenen tarzı bypass açısal anlatmak için bypassSecurityTrustStyle işlevini kullanın.

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

Bir sonra

[style.transform]="safeTransform" 

Eğik belgeler bu kadar Temelde https://angular.io/docs/ts/latest/guide/security.html#!#bypass-security-apis

aynı soruya başvuran Şablonunuzda kullanmak: In RC.1 some styles can't be added using binding syntax

cevabı da var. Uygun hizmet enjekte şimdi o DomSanitizer

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

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

Ve olduğunu dışında bu yazının anda açısal 2'nin son sürümü için

Answer 2

, @Daniel Pliscki cevabı, hala geçerli sizin şablonunuz

[style.transform]="transformStyle"