Angular 2，以內聯樣式添加calc（）。不安全使用插值括號

Question

角2 RC3

我試圖動態地添加calc()的元素中的模板。我有這樣的事情。

template : `<div attr.style.width="{{width}}></div>"` 

export myClass 
{ 
    @Input() myInputObject:any; 
    private width:string; 


    ngOnInit() { this.setWidth()} 

    private setWidth() 
    { 
     let percent = myInputObject.percent; 
     this.width = 'calc(' + percent + '% - 20px)'; 
    } 
} 

如果我使用括號在DOM中看起來像這樣。

<div style="unsafe"></div>

如果我拿出它的工作原理括號（那種）它看起來像這樣。

<div style="calc10% - 20px"></div>

這也不起作用。

<div attr.style.width="calc({{width}} - 20px)"> 

任何有關如何將calc()添加到模板的幫助非常感謝。注意我也嘗試用(和)替換括號。這也回到了「不安全」。

例子：（RC1）

我用我的環境RC3。但是我能夠在plunker中重現與RC1相同的問題。我認爲這是一個安全的事情。但是必須有一種將calc()添加到樣式屬性的方法。也許有比這更好的方法？

https://plnkr.co/edit/hmx5dL72teOyBWCOL0Jm?p=preview

Answer 1

計算方式應消毒。

這裏是爲您解決：

import {DomSanitizationService} from '@angular/platform-browser'; 

@Component({ 
    selector: 'my-app' 
    template: ` 
    <div [style.width]="width"> 
     <h2>Hello {{name}}</h2> 
    </div> 
    ` 
}) 
export class App { 

    private width:string; 

    constructor(sanitizer: DomSanitizationService) { 
    this.name = 'World' 
    this.width = sanitizer.bypassSecurityTrustStyle("calc(10% - 20px)"); 
    } 
}