Angular2 innerHtml binding remove style attribute

Question

Моя проблема, когда я использую innererHtml binding - angular2 удаляет все атрибуты стилей. Это важно для меня, потому что в моей задаче - html генерируется на стороне сервера со всеми стилями. Пример:

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

Но в DOM я вижу только 1234 и этот текст не красный.

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

Спасибо!

Answer 1

Angular 2 предназначается для более declarative approach, поэтому непосредственно манипулирует HTML is often discouraged.

Я считаю, что (почти) все HTML-манипуляции исправлены для фильтрации методом угловой DOM-санитизации. Как вы можете себе представить, style атрибуты не имеют белого цвета для элементов span, фактически, span has no allowed attributes на данный момент.

Answer 2

Вы можете использовать DomSanitized, чтобы избежать этого. Самый простой способ создания пользовательских трубы, как:

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

Таким образом, вы можете использовать его:

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

Plunker Example

Answer 3

Я улучшил пример yurzui немного, заполнив необходимый импорт:

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

Я также должен был добавить класс в моем app.module.ts файл

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

Answer 4

Обратите внимание, что sanitizer имеет несколько методов доверчивых содержания, например,

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

через https://stackoverflow.com/a/41089093/142714

Так, bypassSecurityTrustStyle также может быть то, что вы хотите здесь, так как это будет показывать встроенные стили в содержание HTML (value).

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