Угловая (2/5) проблема рендеринга html-текста со встроенными стилями

У меня возникла проблема с отображением данных 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.

Ожидаемый результат: Угловая (2/5) проблема рендеринга html-текста со встроенными стилями

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
409
1

Ответы 1

Извините за создание дублированного вопроса.

Однако я решил проблему после создания настраиваемой трубы.

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 привязка удалить атрибут стиля

Другие вопросы по теме