Angular 5 - 用管道清理 HTML [英] Angular 5 - sanitizing HTML with pipe

问题描述

当我收到警告时:

<块引用>

警告:清理 HTML 删除了一些内容"

我做了一些研究，看到有人使用下面的管道或看起来像下面的管道

import { Pipe, PipeTransform } from '@angular/core';从@angular/platform-b​​rowser"导入 { DomSanitizer, SafeHtml };@Pipe({ name: 'sanitizeHtml' })导出类 SanitizeHtmlPipe 实现 PipeTransform {构造函数(私有_sanitizer:DomSanitizer){}变换(v:字符串):SafeHtml {返回 this._sanitizer.bypassSecurityTrustHtml(v);}}

不幸的是，即使我像这样实现管道，我仍然遇到同样的错误:

<span [innerHTML]="specialist.blocks[0].paragraph.html |sanitizeHtml"</span><p [innerHTML]="package.fields.remarks |sanitizeHtml"</p><li [innerHTML]="package.fields.name |sanitizeHtml"</li>

所以我想知道是我实现了错误的管道还是有其他原因导致它不起作用?

specialist.blocks[0].paragraph.html 示例:

<块引用>

"<div id="测试"类=测试">\n

姓名专家

\n\n

"

package.fields.remarks 示例:

<块引用>

"安排:3 nachten 包括.ontbijt en 2 greenfees p.p.遇见库兹uit North en South

package.fields.name 示例:

<块引用>

"Shortbreak 3 nachten<br>2 人/高级双人床/LO，包括.高尔夫"

在 Firefox 和 chrome 中获取警告

解决方案

Demo : https://stackblitz.com/edit/angular-vjt27k?file=app%2Fsanitize-html.pipe.ts

pipe.ts

import { Pipe, PipeTransform } from '@angular/core';@Pipe({ 名称:'sanitizeHtml'})导出类 sanitizeHtmlPipe 实现 PipeTransform {变换(值){return value.split('<').join('<');}}

When i got the warning:

"WARNING: sanitizing HTML stripped some content"

I did some research and saw people using the pipe below or a pipe that looks like the one below

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

@Pipe({ name: 'sanitizeHtml' })
export class SanitizeHtmlPipe implements PipeTransform {

    constructor(private _sanitizer: DomSanitizer) { }

    transform(v: string): SafeHtml {
        return this._sanitizer.bypassSecurityTrustHtml(v);
    }
}

Unfortunately I still get the same error even when i implement the pipe like this:

<span [innerHTML]="specialist.blocks[0].paragraph.html | sanitizeHtml"></span>
<p [innerHTML]="package.fields.remarks | sanitizeHtml"></p>
<li [innerHTML]="package.fields.name | sanitizeHtml"></li>

So I'm wondering if I implemented the pipe wrong or is there something else why it doesn't work?

Edit:

example of specialist.blocks[0].paragraph.html:

"< div id="test" class="test"> \n< h3>NAME SPECIALIST< /h3>\n< p>random text< /p>< /div>\n< /div>"

example of package.fields.remarks:

"Arrangement: 3 nachten incl. ontbijt en 2 greenfees p.p. met keuze uit North en South< br>\n- gratis dagelijkse toegang tot de spa (1 uur Hamman, sauna, zwembad, hydromassage)"

example of package.fields.name:

"Shortbreak 3 nachten< br>2 pers./Superior Double/LO, incl. golf"

Getting the warnings in firefox and chrome

解决方案

Demo : https://stackblitz.com/edit/angular-vjt27k?file=app%2Fsanitize-html.pipe.ts

pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'sanitizeHtml'})
export class sanitizeHtmlPipe implements PipeTransform  {
    transform(value) {
        return value.split('< ').join('<');
    }
}

这篇关于Angular 5 - 用管道清理 HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！