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的主要内容,如果未能解决你的问题,请参考以下文章

Angular 5:使用异步管道搜索 - 显示加载指示器

找不到管道:Angular 5 自定义管道

如何降级使用 angular2 编写的自定义管道以在 angular 1.5 中使用?

typescript Angular 5安全html管道

仅为特定类型的数据应用管道或过滤器-Angular 5

R:在一个管道中组合几个 gsub() 函数