Показать представление из внешнего HTML

Question

Я хотел бы отобразить представление на странице из HTML из внешней базы данных, используя Angular 2. Например, у меня есть html-строка в component.ts, как показано ниже:

htmlString = '<div style="color: red">Hello world!</div>';

И это мой HTML-файл:

<div [innerHTML]="htmlString"></div>

Вместо того, чтобы получить красный шрифт "Hello word!"предложение возвращает мне только теги на моей странице.Как я могу исправить эту проблему?

Answer 1

я думаю, что вам также нужно поставить канал, чтобы разрешить HTML в строке (безопасный HTML) .. что-то вроде:

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

@Pipe({
  name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }

  transform(value: any, args?: any): any {
    return this.sanitizer.bypassSecurityTrustHtml(value);
  }

}

и использовать так:

<div [innerHTML]="htmlString | safeHtml"></div>