angular2展示包含html标签的内容

最新推荐文章于 2021-07-01 22:30:37 发布

原创最新推荐文章于 2021-07-01 22:30:37 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular2

AngularJS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Angular2中正确显示包含HTML标签及样式的文本内容。通过使用DomSanitizer的bypassSecurityTrustHtml方法绕过安全限制，实现富文本的完整展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

angular2采用{{变量}}的方式展示数据，但字符串中包含html代码，会被自动过滤掉。

采用<span [innerHTML]="b"></span>这种方式可以直接将html代码展示出来。

但这样写又会存在一个新问题：展示的html标签中，style的属性会被过滤掉。

坑~~~

解决方法：使用ng2服务DomSanitizer中的bypassSecurityTrustHtml 方法

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
    selector: 'my-zhizaoZixunDetail',
    templateUrl: './zhizaoZixunDetail.component.html',
    styleUrls: [ './zhizaoZixunDetail.component.css' ],
    providers: [ZhizaoZixunDetailService]
  })
export class ZhizaoZixunDetailComponent implements OnInit {
    constructor(private activatedRoute: ActivatedRoute,
        private domSanitizer: DomSanitizer,
        private zhizaoZixunDetailService: ZhizaoZixunDetailService) {};
    ngOnInit(): void {
        var results = this.zhizaoZixunDetailService.getData(this.zhizaoZixun);
        results.then((response) => {
            if(response!=null) {
                this.detail=response; 
                this.detail["wenzhNeir"]=
            this.domSanitizer.bypassSecurityTrustHtml(this.detail["wenzhNeir"]);
            }
         }
    }
}

用domSanitizer.bypassSecurityTrustHtml转换一下就可以解决了。

参考：http://www.jianshu.com/p/ef008e9c07de