Angular2 innerHtml привязка удалить атрибут стиля

Моя проблема, когда я использую binder innerThtml - 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

Спасибо!

Ответы

Ответ 1

Вы можете использовать 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>

Пример плунжера

Ответ 2

Я немного улучшил пример 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 {
}

Ответ 3

Angular 2 нацелен на более чем декларативный подход, поэтому прямое манипулирование HTML часто не рекомендуется.

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

Ответ 4

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

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

через fooobar.com/info/12281/...

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

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