在 angular 6 中解码 html 个实体

Question

我正在寻找一个可以解码 angular 6

中的 HTML 实体的库

我试图找到一些东西，我在 angular 2 中找到了一个名为 trustashtml 的函数，但我认为 6 版本不可用。

您可以在下面的 html 模板中找到我的代码：

 <div [innerHTML]="post.body | markdown"></div>

我的领域 post api return 本地人 html 是这样的：

<p style="margin: 1em 0px; font-size: 18px; line-height: 1.5; font-family: Lato, sans-serif;">Hey Android users! Since launching the Grammarly Keyboard for iOS, we&rsquo;ve heard from </p>

有什么想法吗？

Answer 1

您将需要使用 DomSanitizer bypassSecurityTrustHtml() 来绕过安全性并相信给定的值是安全的 HTML，否则 style 属性将不会呈现。

创建自定义管道。

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

@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitized: DomSanitizer) { }
  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

组件HTML。

<div [innerHtml]="html | safeHtml"></div>

在您的组件中定义一个变量来保存 HTML 值。

html: string = "<p style='margin: 1em 0px; font-size: 18px; line-height: 1.5; font-family: Lato, sans-serif;'>Hey Android users! Since launching the Grammarly Keyboard for iOS, we&rsquo;ve heard from </p>";

Answer 2

您可以在

中编写代码

[innerHTML]='post.body'

Angular 它被认为是一个属性并在 HTML.

中自动转换

在 angular 6 中解码 html 个实体

decode html entities in angular 6

angular6