Question

当我收到警告时：

“警告：清理HTML剥离了一些内容”

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

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

不幸的是，即使我实现这样的管道，我仍然会得到同样的错误：

<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的例子：

“＆lt; div id =”test“class =”test“＆gt; \ n＆lt; h3＆gt; NAME SPECIALIST＆lt; / H3＆GT; \ n＆LT; p>随机文本＆lt; / p为H.＆LT; / DIV＆GT; \ n＆LT; / DIV＆gt;“中

package.fields.remarks的例子：

“安排：3 nachten incl.ontbijt en 2 greenfees p.p. met keuze uit North en South＆lt; br＆gt; \ n- gratis dagelijkse toegang tot de spa（1 uur 哈曼，桑拿，zwembad，水力按摩）“

package.fields.name的例子：

“Shortbreak 3 nachten＆lt; br＆gt; 2 pers./Superior Double / LO，包括高尔夫”

在firefox和chrome中获取警告

Answer 1

如下面的示例，如果您尝试在html angular中尝试打印{}，则会将其视为表达式，并且会出现错误，因此您可以使用以下选项，我们有2种HTML清理选项， 1）使用管道

 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(value: string): SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(value);
  }

}

您可以在Component中使用它， {{变量| santizeHtml}}

2）使用组件，作为如下所示的属性绑定，在.ts文件中声明html

allowedChars = '@ # $ % ^ & * ( ) _ - ., ? < > { } [ ] ! +';

并在模板中将其用作

<span [innerHTML]="allowedChars"></span>

Answer 2

一切都很好，但您的 HTML 并不完美。所以你需要从 html 标签中删除空格。
你的 JSON 应该是这样的

JSON：


      specialist: any = {
        "blocks": [
          {
            "paragraph": {
              "html": '<div id="test" class="test">\n<h3>NAME SPECIALIST</h3>\n<p>random text</p> <div>\n</div>'
            }
          }
        ]
      }
      package: any = {
        "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)',
          "name": 'Shortbreak 3 nachten<br>2 pers./Superior Double/LO, incl. golf'
        }
      }

HTML：


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

消毒管道 TS：


    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: any): any {
            return this._sanitizer.bypassSecurityTrustHtml(v);
        }
    }

输出：

Browser Output Log View

有关完整的 HTML 清理导入设置过程，请参阅this post

Angular 5 - 使用管道清理HTML

2 个答案: