Question

我想使用Angular 2在外部数据库的HTML页面上显示一个视图。例如，我在component.ts中有一个html字符串，如下所示：

htmlString = '<div style="color: red">Hello world!</div>';

这是我的html文件：

<div [innerHTML]="htmlString"></div>

取而代之的是获取红色字体“Hello word！”句子它只返回我的页面上的标签。我该如何解决这个问题？

Answer 1

我认为你还需要放一个管道来允许html in string（safe html）.. 类似的东西：

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

@Pipe({
  name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }

  transform(value: any, args?: any): any {
    return this.sanitizer.bypassSecurityTrustHtml(value);
  }

}

并使用如下：

<div [innerHTML]="htmlString | safeHtml"></div>

从外部HTML显示视图

1 个答案: