Question

我有一个有角度的2站点，我试图在页面上注入一些带有某种样式的HTML，如下所示：

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

结果是在调用我们的Web API之后返回到页面的数据。 results.top3.TopThreeComments是一个如下所示的字符串：

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

显然，样式被用来强调跨度内的文本，但由于某种原因，角度网站会删除样式，以便文本在呈现时不加下划线。

为什么会这样？

我在谷歌搜索中找到了一个网站：

Angular2 innerHtml binding remove style attribute

建议使用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 binding remove style attribute底部所述？这允许在声明它的模块之外看到safeHtml符号。

Angular2网站剥离了我的造型

1 个答案: