如何在 Angular 上呈现原始 HTML答案

【问题标题】：How to render a raw HTML on Angular如何在 Angular 上呈现原始 HTML
【发布时间】：2020-04-21 09:57:03
【问题描述】：

我尝试使用 innerHTML 呈现原始 HTML，如下所示：

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

此 HTML 具有内嵌样式，但不能以这种方式工作。

呈现 HTML，但不呈现样式。

如果我将相同的原始 HTML 粘贴到单独的文件中，它会完美运行。

我提到的样式基本上是用来改变标记标签的背景颜色的。

【问题讨论】：

请在问题中包含一个不起作用的“原始 HTML”示例。
这能回答你的问题吗？ style not working for innerhtml in Angular 2 Typescript
我用新的 html + css 解决了重新加载组件的问题。显然，innerHTML 没有用 HTML 加载 CSS……我不知道究竟是为什么。

标签： html css angular typescript

【解决方案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>

【讨论】：

为什么是“潜在”？你什么时候不需要这个？