我有一个有角度的2站点，我试图在页面上注入一些带有一些样式的HTML，如下所示：
<div [innerHTML]="results.top3.TopThreeComments"></div>
结果是在调用我们的Web API之后返回到页面的数据 . results.top3.TopThreeComments 是一个如下所示的字符串：
<p><span style="text-decoration: underline;">underline</span></p>
显然，样式被支持为 Span 内的文本加下划线，但由于某种原因，角度站点剥离样式，以便文本在呈现时不加下划线 .
为什么是这样？
我在谷歌搜索中找到了一个网站：
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
有谁知道我做错了什么 . 或者有另一种方法（最好是更简单）吗？
1 回答
你是否在你的模块声明中加入了SafeHtmlPipe，如Angular2 innerHtml binding remove style attribute底部所述？这允许在声明的模块之外看到safeHtml符号 .