DomSanitizer 不会将文本解析为 HTML [英] DomSanitizer doesn't parse text to HTML

问题描述

我正在处理一个 Angular 项目，我正在从一个数据库中获取数据，该数据库中包含带有 HTML 标记的数据.要将它放在 HTML 中，我可以通过以下代码做到这一点:

I am working on an Angular project and I am taking data from a database where it has data with HTML tags. To put it in the HTML I can do that through this code:

[innerHTML]="element.texto"

我正在寻找的是在 ts 上使用它以将文本放在 pdf 上.我正在使用 DomSanitizer，但输出是错误的，并且不会在 HTML 上对其进行转换.这是我使用的示例代码:

What Im looking for is to use it on the ts to put the text on a pdf. Im using DomSanitizer but the output is wrong and does not transform it on the HTML. This is the exaple code im using:

import { DomSanitizer } from "@angular/platform-browser";
///
  constructor(
    private sanitizer:DomSanitizer
  ) { }

dataTransformer() {
    let textoHTML = "<p>Hello <b>World</b></p>"
    alert(this.sanitizer.bypassSecurityTrustHtml(textoHTML)) //It shows: SafeValue must use [property]=binding: <p>Hello <b>World</b></p> (see http://g.co/ng/security#xss)
  }

另一方面，我使用了以下代码来解析代码，但使用了错误的解决方案.

In the other hand, I have used the following code for parseing the code but with a wrong solution.

this.sanitizer.bypassSecurityTrustHtml(textoHTML)['changingThisBreaksApplicationSecurity'] //It shows: <p>Hello <b>World</b></p>

我要找的是:Hello World

What im looking for is: Hello World

谢谢！

推荐答案

你可以使用管道[innerHTML]="element.texto |safeHtml "

you can use pipe [innerHTML]="element.texto | safeHtml "

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

@Pipe({
  name: 'safeHtml',
  pure: false
})

export class SafeHtmlPipe implements PipeTransform {
  constructor(protected sanitizer: DomSanitizer) {
  }

  transform(value: any): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(value);
  }


}

这篇关于DomSanitizer 不会将文本解析为 HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！