带有内联样式的html文本的Angular（2/5）渲染问题

Question

我在显示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>

实际输出为：

  

欢迎来到样本   演示！

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

预期产量：

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 binding remove style attribute