У меня возникла проблема с отображением данных HTML, включая встроенный стиль, который генерируется динамически с помощью редактора (например, TinyMCE).
Фактически, я использовал привязку innerHTML
для отображения данных html. Однако он игнорирует любой встроенный style
.
Например:
У меня есть следующие образцы данных о component.ts
:
let sampleData = '<h1><span style = "background-color: #ffff99;">Welcome to the sample demo!</span></h1> <p><span style = "color: #ff0000;">Please try out the features provided in this basic example.</span>'
Пытаюсь отобразить на component.html
:
<div innerHTML = "{{ sampleData }}"></div>
Фактический выход:
Welcome to the sample demo!
Please try out the features provided in this basic example.
Извините за создание дублированного вопроса.
Однако я решил проблему после создания настраиваемой трубы.
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'
/*
* Pipe to avoid stripping the inline style on html text.
*
* Usage:
* safeHtml
* Example:
* 1. In Javascript:
* let input = new SafeHtml().transform(input);
*
* 2. In HTML:
* {{ safeHtml }}
*/
@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {}
transform(input) {
return this.sanitized.bypassSecurityTrustHtml(input);
}
}
Применить трубу:
<div [innerHtml] = "myHtmlContent | safeHtml"></div>
Справочный источник: Angular2 innerHtml привязка удалить атрибут стиля