美文网首页
Angular---显示html文本

Angular---显示html文本

作者: BigDipper | 来源:发表于2019-05-23 16:46 被阅读0次

    在angular中,如果直接使用插值表达式{{}}直接显示html内容,则html的标签不会被解析。

    比如,下面的代码:

    <div class="content">{{article.content}}</div>
    

    显示效果如图所示:


    没有解析html标签.png

    这时,就需要使用innerHTML属性,代码如下:

    <div class="content" [innerHTML]="article.content"></div>
    

    这样就可以正常显示了:


    解析了html标签.png

    补充:解决被净化机制筛掉的问题

    虽然使用innerHTML属性可以正常显示html内容,但是出于安全考虑,angular的净化机制会过滤掉某些内容,来帮你防范跨站脚本攻击(XSS)类的安全问题。

    页面内容.png

    这真是一把双刃剑啊。怎么办呢?在特定场景下,确实是需要禁用净化机制,绕过安全检测。此时,我们可以用DomSanitizer来达到这样的目的。

    首先,新建一个用来过滤数据的管道,意思就是告诉angular,过我这个管道的数据就是安全的,不需要净化处理(我的数据,我负责!)。

    在命令行执行如下代码,生成管道:

    ng g p ./pipe/bypassSecurityTrustHtml --spec=false
    

    编辑这个管道文件,代码如下:

    import { Pipe, PipeTransform } from '@angular/core';
    import { DomSanitizer } from '@angular/platform-browser';
    
    @Pipe({
      name: 'bypassSecurityTrustHtml'
    })
    export class BypassSecurityTrustHtmlPipe implements PipeTransform {
    
      constructor(private domSanitizer: DomSanitizer) {}
    
      transform(html: any, args?: any): any {
        return this.domSanitizer.bypassSecurityTrustHtml(html);
      }
    
    }
    
    

    然后在目标组件所属的模块中,引入这个管道:


    引入管道.png

    最后就像其他管道那样使用它就可以了:

    <div class="content" [innerHTML]="article.content | bypassSecurityTrustHtml"></div>
    

    效果如下:


    转换完成后,样式还在.png

    相关文章

      网友评论

          本文标题:Angular---显示html文本

          本文链接:https://www.haomeiwen.com/subject/pbyvzqtx.html