角度 – 在RC.1中,某些样式无法使用绑定语法添加

<div [style.background-image]="\'url(\' + image + \')\'">Background</div>
<div [style.transform]="rotate(7deg)"

update(2.0.0 final)

import { Pipe } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'safeHtml'})
export class SafeHtml {
  constructor(private sanitizer:DomSanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

<div [innerHTML]="someHtml | safeHtml"

更新

DomSanitizationService将在RC.6中重命名为DomSanitizer

原版的

这应该在RC.2中解决

参见Angular2 Developer Guide – Security

Angular2在RC.1中引用了CSS值和属性绑定的消息，如[innerHTML] = …和[src] =“…”

参见https://github.com/angular/angular/issues/8491#issuecomment-217467582

可以使用DomSanitizer.bypassSecurityTrustStyle(…)将值标记为可信任值

import {DomSanitizer} from '@angular/platform-browser';
...
constructor(sanitizer: DomSanitizationService) {
  this.backgroundImageStyle = sanitizer.bypassSecurityTrustStyle('url(' + this.image + ')');
  // for HTML
  // this.backgroundImageStyle = sanitizer.bypassSecurityTrustHtml(...);

}

并绑定到该值，而不是不可信的纯字符串。

这也可以包裹在管道中

@Pipe({name: 'safeStyle'})
export class Safe {
  constructor(private sanitizer:Sanitizer){}

  transform(style) {
    return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustHtml(style);
    // return this.sanitizer.bypassSecurityTrustScript(value);
    // return this.sanitizer.bypassSecurityTrustUrl(value);
    // return this.sanitizer.bypassSecurityTrustResourceUrl(value);
  }
}

<div [ngStyle]="someStyle | safeStyle"></div>

同

someHtml = `<a href="#" onClick="alert(document.cookie);">click to see the awesome</a>`;

仍然在工作： – [(正在进行中)

Plunker example

参见Angular 2 Security Tracking Issue

和https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html

关于{{…}}的提示

使用prop =“{{sanitizedContent}}”无法绑定消毒内容，因为{{}}在分配清除消毒之前对该值进行stringyfies。