angular2展示包含html标签的内容

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