javascript - 带有内联样式的 html 文本的 Angular (2/5) 渲染问题

Question

我在显示 HTML 数据时遇到问题，包括通过编辑器动态生成的内联样式（例如 TinyMCE）。事实上，我已经使用innerHTML绑定来显示 html 数据。但是，它忽略任何 inline 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>

实际输出为：

欢迎来到示例演示！

请试用此基本示例中提供的功能。

预期输出：

标签： javascriptangular

Answer 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 绑定移除样式属性