以角度 6 解码 html 实体 [英] decode html entities in angular 6

问题描述

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

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

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

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

我的字段 post api 返回一个原生 html 是这样的:

<p style="margin: 1em 0px; font-size: 18px; line-height: 1.5; font-family: Lato, sans-serif;">嘿Android用户！自从推出适用于 iOS 的语法键盘以来，我们就收到了</p>

有什么想法吗?

解决方案

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

创建自定义管道.

import { Component, OnInit, Pipe, PipeTransform } from '@angular/core';从'@angular/platform-b​​rowser' 导入 { DomSanitizer }@Pipe({ 名称:'safeHtml' })导出类 SafeHtmlPipe 实现 PipeTransform {构造函数(私有消毒:DomSanitizer){}变换(值){返回 this.sanitized.bypassSecurityTrustHtml(value);}}

组件 HTML.

在你的组件中定义一个保存 HTML 值的变量.

html: string = "<p style='margin: 1em 0px; font-size: 18px; line-height: 1.5; font-family: Lato, sans-serif;'>嘿安卓用户! 自从推出适用于 iOS 的语法键盘以来，我们就收到了</p>";

I'm looking for a library which I can decode my HTML entities in angular 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.

Below you sould find my code in html template :

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

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>

Any idea?

解决方案

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.

Create custom Pipe.

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);
  }
}

Component HTML.

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

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

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