Angular 2, Hinzufügen von calc() als Inline-Stil. Unsichere Interpolation mit Klammern

Question

Angular 2 rc3

Ich versuche, dynamisch calc() in einer Vorlage zu einem Element hinzuzufügen. Ich habe so etwas.

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

Wenn ich die Klammer verwenden, sieht die Ausgabe im DOM wie folgt aus.

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

Wenn ich die Klammer es (Art) arbeitet herausnehmen Es sieht wie folgt aus.

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

Das funktioniert auch nicht.

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

Jede Hilfe, wie calc() der Vorlage hinzuzufügen ist sehr geschätzt. Hinweis Ich habe auch versucht, die Klammern durch ( und ) zu ersetzen. Das kam auch als "unsicher" zurück.

Beispiel: (rc1)

Ich verwende rc3 in meiner Umgebung. Aber ich konnte das gleiche Problem mit RC1 in Plunker reproduzieren. Ich gehe davon aus, dass dies eine Sicherheitsfrage ist. Aber es muss einen Weg geben, calc() zu einem Style-Attribut hinzuzufügen. Vielleicht gibt es einen besseren Weg als das?

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

Answer 1

Berechnete Arten hygienisiert werden sollte. Hier

ist die Lösung für Sie:

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)"); 
    } 
}