Angular 2 komplexe Logik zu entscheiden [style.background] funktioniert nicht

Question

Ich habe sehr komplexe Logik entscheiden, welches Hintergrundbild angezeigt werden soll.

Hier ist, wie ich bin versucht, es zu erreichen:

html:

<div class="form-control-icon" 
     id="switch-icon" 
     [style.background]="imagePath"> 
    </div> 

component.ts

import { Component } from '@angular/core'; 
    @Component({ 
     selector: 'distance-units', 
     templateUrl: 'app/find-page/distance-units.component.html', 
     styleUrls: ['app/find-page/distance-units.component.css'] 
    }) 
    export class DistanceUnitsComponent { 
     distanceUnit = "kilometers"; 
     isEnabled = false; 
     isDisabled = true; 
     imagePath = 'url("../images/switch-kilometers-disabled.png") center no-repeat'; 

     constructor() { 
      this.imagePath = 'url("../images/switch-kilometers-disabled.png") center no-repeat'; 
     } 

     toggleDistanceUnit() { 
      this.distanceUnit = 
      (this.distanceUnit === "kilometers" ? "miles" : "kilometers"); 
     } 

     disableSelf() { 

     } 

     setImage() { 
      this.imagePath = this.getImage(); 
     } 

     getImage() { 
      if (this.isEnabled) { 
       if (this.distanceUnit === 'kilometers') { 
        return 'url(\'../images/switch-kilometers.png\') center no-repeat' 
       } else { 
        return 'url(\'../images/switch-miles.png\') center no-repeat' 
       } 
      } else { 
       if (this.distanceUnit === 'kilometers') { 
        return 'url(\'../images/switch-kilometers-disabled.png\') center no-repeat' 
       } else { 
        return 'url(\'../images/switch-miles-disabled.png\') center no-repeat' 
       } 
      } 
     } 
    } 

hat jedoch die tatsächliche Kontrolle in der Webseite keinen Hintergrund Eigentum überhaupt während des Laufens der Webseite. Anfangs wird die imagePath-Variable auf einen Wert gesetzt, den ich für einen gültigen Wert für die Hintergrund-CSS hielt.

ich tun, um diese Warnung in der Konsole, aber ich sehe nicht, warum, dass der Hintergrund würde dazu führen, nicht eingestellt werden:

WARNUNG: unsichere Art Wert url (‘../ images desinfizierende/switch-kilometers.png ') center no-repeat (siehe http://g.co/ng/security#xss).

Kann jemand sehen, warum die Hintergrundeigenschaft nicht dort ist?

Answer 1

Ich denke, das sollte für Sie arbeiten. Stattdessen [style.background] nur dies die Umsetzung tun:

[ngStyle]="{background: imagePath}" 

Das Problem tritt auf, weil Angular 2 „Angst“ des Wertes ist versucht man, auf das DOM zu injizieren in. Überprüfen Sie dieses Kapitel auf die Sicherung, wenn Sie mehr wissen wollen:

https://angular.io/docs/ts/latest/guide/security.html