Angular 5 - 使用管道清理 HTML

当我收到警告时：

“警告：清理 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>

所以我想知道我是否错误地实现了管道，或者还有其他原因导致它不起作用？

Edit:

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

" \n姓名专家\n

随机文本

\n"

的例子package.fields.remarks:

“安排： 3 nachten incl. ontbijt en 2 greenfees p.p. met keuze uit North en South\n- 免费 dagelijkse toegang tot de spa (1 uur 哈曼、桑拿、zwembad、水力按摩）”

的例子package.fields.name:

“Shortbreak 3 nachten2 人/高级双人床/LO，包括高尔夫”

在 Firefox 和 Chrome 中获取警告

如下例如果您尝试打印{}在 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);
  }

}

在组件中，您可以将其用作{{variable | santizeHtml }}

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

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

并在模板中使用它，

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