角2，2.0.0-rc.2，不能適用風格指令

我想申請一個DIV，採用了棱角分明2型指令直列CSS3變換，變換屬性：角2，2.0.0-rc.2，不能適用風格指令

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

組件數據是：

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

我在控制檯中這樣的警告：

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)

標準樣式，比如寬度和背景顏色重新應用。 Trasnform沒有得到應用。任何想法？

來源

2016-07-06 albanx

可能重複[在RC.1中，某些樣式不能使用綁定語法添加]（http://stackoverflow.com/questions/37076 867/in-rc-1-some-styles-can-be-added-using-binding-syntax） –

@DanielPliscki也許內容是一樣的，但是這個問題是可怕的。我在發帖之前搜索過，沒有發現任何有關此問題的信息。 – albanx

我已經用我的解決方案更新了答案。 –

UPDATE：Angular2 RC6起，DomSanitizationService已更名爲DomSanitizer：https://stackoverflow.com/a/39462172/3481582

原來的答案

正如你沒發現你在我提到的波紋管的問題需要什麼，我我會盡力在這裏回答。

您無法設置style.transform的原因是因爲angular有一個清理過程，可以防止惡意代碼注入您的應用程序。

爲了能夠包含這種風格，你必須告訴角度繞過這個值。

首先注入消毒劑在組件構造

constructor(private sanitizer: DomSanitizationService) {}

然後，使用bypassSecurityTrustStyle功能告訴角度繞過了sanitize過程的所需的樣式。

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

的然後用它在你的模板

[style.transform]="safeTransform"

角文檔引用 https://angular.io/docs/ts/latest/guide/security.html#!#bypass-security-apis

基本上完全相同的問題，因爲這： In RC.1 some styles can't be added using binding syntax

答案也是有的。

來源

2016-07-06 17:08:44

很好的答案，它正在工作。此問題尚未在rc.2 – albanx

上得到解決請注意DomSanitizationService現在是DomSanitizer。 –

對於這個帖子的時間的最新版本角2，@Daniel Pliscki的回答仍然是有效的，但適當的服務注入現在DomSanitizer

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

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

然後在您的模板

[style.transform]="transformStyle"

來源

2017-01-01 11:28:59

角2，2.0.0-rc.2，不能適用風格指令

回答

相關問題