解码Angular 6中的html实体

Question

我正在寻找可以在角度6中解码我的html实体的库

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

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

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

我的字段发布api返回本地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将不呈现ateribute。

创建自定义管道。

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>";