Angular 5 - 使用管道清理 HTML
Posted
技术标签:
【中文标题】Angular 5 - 使用管道清理 HTML【英文标题】:Angular 5 - sanitizing HTML with pipe 【发布时间】:2018-05-11 17:13:14 【问题描述】:当我收到警告时:
“警告:清理 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
的示例:
"" \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 pers./Superior Double/LO,包括高尔夫”
在 Firefox 和 chrome 中获取警告
【参考方案1】: 一切都很好,但您的 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
【讨论】:
【参考方案2】:演示:https://stackblitz.com/edit/angular-vjt27k?file=app%2Fsanitize-html.pipe.ts
管道.ts
import Pipe, PipeTransform from '@angular/core';
@Pipe( name: 'sanitizeHtml')
export class sanitizeHtmlPipe implements PipeTransform
transform(value)
return value.split('< ').join('<');
【讨论】:
【参考方案3】:如下例所示,如果您尝试在 html angular 中打印 会将其视为表达式并会给出错误,因此您可以获得以下选项,
我们有 2 个 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(value: string): SafeHtml
return this._sanitizer.bypassSecurityTrustHtml(value);
在组件中,您可以将其用作variable | santizeHtml
-
使用组件,
作为如下的属性绑定,
在 .ts 文件中声明 html
const allowedChars = '@ # $ % ^ & * ( ) _ - ., ? < > [ ] ! +';
并在模板中使用它,
<span [innerHTML]="allowedChars"></span>
【讨论】:
以上是关于Angular 5 - 使用管道清理 HTML的主要内容,如果未能解决你的问题,请参考以下文章