góc 2, 2.0.0-rc.2, Không thể áp dụng inline css3 chuyển đổi với phong cách chỉ thị

Question

Tôi cố gắng để áp dụng cho một DIV, sử dụng góc chỉ thị 2 phong cách, biến đổi:

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

Thành phần dữ liệu là:

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

tôi nhận được cảnh báo này trong giao diện điều khiển:

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) 

các phong cách tiêu chuẩn như chiều rộng và background-color một áp dụng lại. Trasnform không được áp dụng. Bất kỳ ý tưởng?

Answer 1

CẬP NHẬT: Angular2 RC6 trở đi, DomSanitizationService đã được đổi tên thành DomSanitizer: https://stackoverflow.com/a/39462172/3481582

gốc trả lời

Như bạn không tìm thấy những gì bạn cần trong câu hỏi tôi đã đề cập dưới đây, tôi sẽ cố gắng trả lời ở đây.

Lý do bạn không thể đặt style.transform là do góc có quy trình vệ sinh ngăn mã độc hại được đưa vào ứng dụng của bạn.

Để có thể bao gồm kiểu này, bạn sẽ phải nói góc để bỏ qua giá trị này.

Đầu tiên tiêm khử trùng trong các nhà xây dựng thành phần

constructor(private sanitizer: DomSanitizationService) {} 

Sau đó, sử dụng chức năng bypassSecurityTrustStyle nói với góc để bỏ qua phong cách mong muốn của quá trình vệ sinh.

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

Một sau đó sử dụng nó trong mẫu của bạn

[style.transform]="safeTransform" 

tài liệu góc tham chiếu https://angular.io/docs/ts/latest/guide/security.html#!#bypass-security-apis

Về cơ bản cùng một câu hỏi chính xác như thế này: In RC.1 some styles can't be added using binding syntax

Câu trả lời cũng là ở đó.

Answer 2

Đối với phiên bản mới nhất của góc 2 tại thời điểm bài viết này, câu trả lời @Daniel Pliscki là vẫn còn hiệu lực, ngoại trừ các dịch vụ bơm thích hợp tại là DomSanitizer

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

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

Và sau đó trong mẫu của bạn

[style.transform]="transformStyle"