いくつかのスタイルは</p> <pre class="lang-ts prettyprint-override"><code><div [style.background-image]="\'url(\' + image + \')\'">Background</div> <div [style.transform]="rotate(7deg)" </code></pre><p>等

Question

スタイルはもはや

Answer 1

更新（最終2.0.0）

添加されていない結合構文を使用して追加することができません

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

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

    transform(html) { 
    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); 
    } 
} 

も参照してください。https://angular.io/api/platform-browser/DomSanitizer

更新

<div [innerHTML]="someHtml | safeHtml" 

これはRC.2に固定しなければならない

元RC.6にDomSanitizer名前に変更されようとしている

0333333も参照してください。

---

Angular2はDomSanitizer.bypassSecurityTrustStyle(...)

を使用して、信頼できるような値をマークすることができ、またhttps://github.com/angular/angular/issues/8491#issuecomment-217467582

を参照してくださいRC.1

に[innerHTML]=...と[src]="..."のように結合CSS値とプロパティの消毒をintruduced

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

} 

を使用し、信頼できないプレーンストリングの代わりにこの値にバインドします。

これは

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

と

@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> 

のようなパイプでもラップすることができますが、まだかかわらず、働いている： - [（進行中のそれの仕事）

Plunker example（角2.0.0-rc-1）

も参照してくださいAngular 2 Security Tracking Issue

と

https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.htmlヒントについて{{...}}

サニタイズコンテンツがprop="{{sanitizedContent}}"{{}}ためstringyfiesサニタイズを破った割り当てられる前値を使用してバインドすることはできません。