如何在Angular上渲染原始HTML

Question

我尝试使用innerHTML渲染原始HTML，如下所示：

 <span *ngIf="displacyHTML " [innerHTML]="displacyHTML"></span>

这个HTML拥有行内样式，但它并不按照那种方式工作。

虽然HTML已被呈现，但样式并未生效。

如果我将相同的原始HTML粘贴到单独的文件中，则可以完美地工作。

我提到的样式基本上用于更改标记标签的背景颜色。

- ArthurS

---

请在问题中包含一个不起作用的“原始HTML”示例。 - ConnorsFan

这回答解决了你的问题吗？在Angular 2 TypeScript中，innerHTML的样式不起作用 - Wai Ha Lee

我通过使用新的HTML + CSS重新加载组件来解决了这个问题。显然，innerHTML不会将CSS与HTML一起加载...我不确定原因。 - ArthurS

Answer 1

可能需要在您的HTML中使用SafePipe，因为您的浏览器不信任注入的HTML代码：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'safePipe'})

export class safePipe implements PipeTransform  {

constructor(protected sanitizer: DomSanitizer):{}

  transform(value) {
    return this.sanitizer.bypassSecurityTrustHtml(value);
  }
}

在 HTML 中的使用：

<span [innerHtml]="potentiallyNotSafeHtmlCode | safePipe"></span>

- seawave_23

---

为什么要用“潜在”这个词？什么情况下不需要使用它？ - dude