Angular2 innerHtml Bindung entfernen Stilattribut

Question

Mein Problem, dass, wenn ich innererHtml Bindung verwende - angular2 alle Stile Attribute entfernen. Es ist wichtig für mich, weil in meiner Aufgabe - HTML auf der Serverseite mit allen Stilen generiert wird. Beispiel:

@Component({ 
    selector: 'my-app', 
    template: ` 
    <input type="text" [(ngModel)]="html"> 
    <div [innerHtml]="html"> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    html: string; 
    constructor() { 
    this.name = 'Angular2' 
    this.html = "<span style=\"color:red;\">1234</span>"; 
    } 
} 

Aber in DOM sehe ich nur 1234 und dieser Text ist nicht rot.

http://plnkr.co/edit/UQJOFMKl9OwMRIJ38U8D?p=preview

Vielen Dank!

Answer 1

Angular 2 zielt auf eine mehr declarative approach, so direkt HTML is often discouraged manipulieren.

Ich glaube, dass (fast) alle HTML-Manipulationen gepatcht werden, um durch eckige DOM-Bereinigung gefiltert zu werden. Wie Sie sich vorstellen können, sind style Attribute nicht für Spannweitenelemente in der Tat, span has no allowed attributes im Moment.

Answer 2

Sie können DomSanitized nutzen, um dies zu vermeiden. Der einfachste Weg ist benutzerdefinierte Rohr schaffen wie:

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

@Pipe({ name: 'safeHtml'}) 
export class SafeHtmlPipe implements PipeTransform { 
    constructor(private sanitized: DomSanitizer) {} 
    transform(value) { 
    return this.sanitized.bypassSecurityTrustHtml(value); 
    } 
} 

So können Sie es verwenden:

<div [innerHtml]="html | safeHtml"></div> 

Plunker Example

Answer 3

ich das Beispiel von yurzui, indem Sie ein wenig verbessert die benötigten Importe:

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

@Pipe({ name: 'safeHtml'}) 
export class SafeHtmlPipe implements PipeTransform { 
    constructor(private sanitized: DomSanitizer) {} 
    transform(value) { 
    return this.sanitized.bypassSecurityTrustHtml(value); 
    } 
} 

Ich hatte auch die Klasse in meinem app.module.ts

import ... 
import {SafeHtmlPipe} from "./pipes/safehtml.pipe"; 
@NgModule({ 
    declarations: [ 
     AppComponent, 
     ..., 
     SafeHtmlPipe <-- 
    ], 
    imports: [...], 
    providers: [...], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

Answer 4

Hinweis Datei hinzufügen, dass die sanitizer ein paar Methoden für vertrauensvollen Inhalt hat z.B.

return this.sanitizer.bypassSecurityTrustStyle(value); 
return this.sanitizer.bypassSecurityTrustHtml(value); 
return this.sanitizer.bypassSecurityTrustXxx(value); // - see docs [1] 

über https://stackoverflow.com/a/41089093/142714

So kann bypassSecurityTrustStyle auch das sein, was Sie hier wollen, da diese Inline-Styles in Ihrem HTML-Inhalt (value) zeigen.

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