Angular2网站剥离了我的样式

Question

我有一个angular 2网站，我试图将一些具有某种样式的HTML注入到页面上，如下所示：

<div [innerHTML]="results.top3.TopThreeComments"></div>

结果是调用Web API后返回到页面的数据。 results.top3.TopThreeComments是一个看起来像这样的字符串：

<p><span style="text-decoration: underline;">underline</span></p>

显然，该样式应该使跨度内的文本成为下划线，但是由于某些原因，角度站点会剥去样式，以便在渲染文本时不对其下划线。

为什么是这样？

我在Google搜索中遇到了一个网站：

Angular2 innerHtml绑定删除样式属性

建议使用DomSanitizer：

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

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

...然后在页面上：

<div [innerHtml]="html | safeHtml"></div>

因此，我将上述打字稿添加到我的主要组件文件（驱动页面）中，并将safeHtml插入到div的innerHtml属性中：

<div [innerHTML]="results.top3.TopThreeComments | safeHtml"></div>

所有这些所做的就是在Chrome控制台中给我以下错误：

Uncaught Error: Template parse errors:
The pipe 'safeHtml' could not be found ("op3.TopThreeComments">
                    <strong>Comments</strong><br>
                    <div [ERROR ->][innerHTML]="results.top3.TopThreeComments | safeHtml"></div>
                </div>
"): ng:///ResultsAppModule/ResultsComponent.html@73:25

有谁知道我在做什么错。 还是有其他替代方法（最好是更简单）？

Answer 1

您是否已将SafeHtmlPipe放入模块声明中，如Angular2 innerHtml绑定删除样式属性的底部所述？ 这样就可以在声明其的模块之外看到safeHtml符号。