Внутренняя HTML отображает все правильно, кроме цвета текста и фона

Question

JavaScript с Angular 7. Не ищу способ добавить цвет. Ищете способ отображения сохраненных цветов. У меня есть текстовый редактор, который сохраняет в базу данных. Он сохраняет данные пользователя правильно и отображается как:

<h1><strong style="color: rgb(230, 0, 0); background-color: rgb(255, 255, 0);"><em><u>COLOR TEST</u></em></strong></h1>

Поэтому я добавляю его в innerHTML = "{{element.Comments}}". Он отображает все правильно, как пользователь вводит его (размер шрифта, полужирный, курсив, подчеркивание и т. Д. c.), Но не показывает цвет текста или фоновый цвет, даже если он показывает, что он там есть.

Кто-нибудь знает, как это исправить?

Редактировать: вот мой ожидаемый результат:

А вот токовый выход:

Answer 1

Чтобы применить любой внутренний стиль HTML и разрешить классы css, взгляните на ViewEncapsulation.

У вас есть прекрасный пример на https://angular.io/api/core/ViewEncapsulation. :)

Answer 2

Я нашел ответ. Angular выполнял санацию кода и не отображал сохраненные цвета, которые пользователь вставлял из редактора форматированного текста.

Ответ - создать пользовательский канал.

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

@Pipe({
  name: 'safeComment',
  pure: false
})
export class CommentPipe implements PipeTransform {

    constructor(protected _sanitizer: DomSanitizer) {}
    transform(items): SafeHtml{
        return this._sanitizer.bypassSecurityTrustHtml(items);
    }
}

Затем в HTML нужных вам файлах.

<div>[innerHTML]="element.value | safeComment"</div>