解码Angular 6中的html实体 [英] decode html entities in angular 6

问题描述

我正在寻找一个可以以角度6解码HTML实体的库

I'm looking for a library which I can decode my HTML entities in angular 6

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

I've tried to find something and I found a function called trustashtml in angular 2, but I don't think so is available for 6 version.

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

Below you sould find my code in html template :

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

我的字段发布api返回本地html就是这样

My field post api return a native html is something like that :

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

有什么主意吗?

推荐答案

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

You will need to use DomSanitizer bypassSecurityTrustHtml() to Bypass security and trust the given value to be safe HTML, Otherwise style ateribute will not be rendered.

创建自定义管道.

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值的变量.

In your component define a variable that will hold the HTML value.

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

这篇关于解码Angular 6中的html实体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！