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

问题描述

当我收到警告时:

警告:清理HTML会删除某些内容"

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

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

< div id =" test"class =" test> \ n< h3> NAME SPECIALIST< /h3> \ n< p>随机文字</p></div> \ n</div>"

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

package.fields.remarks的示例:

布置:3个餐点，其中包括ontbijt和2个pfe p.p. met keuze 南伊特北部br> \ n-免费dagelijkse toegang tot de spa(1 uur 哈曼(Hamman)，桑拿浴室，茨韦姆巴德(zwembad)，水力按摩)"

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

package.fields.name的示例:

破门3次进攻，每人2次/超级双人房/本垒打，包括高尔夫"

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

获取使用Firefox和Chrome的警告

Getting the warnings in firefox and chrome

推荐答案

演示: 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屋！