zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    [codeforces] 97B Superset || 平面分治
    [hdu] 5696 区间的价值 || 序列分治
    [zoj] 1937 [poj] 2248 Addition Chains || ID-DFS
    [poj] 2286 The Rotation Game || ID-DFS
    [codeforces] 25E Test || hash
    luogu P1196 银河英雄传说
    luogu P1357 花园
    luogu P1156 垃圾陷阱
    luogu P1127 词链
    luogu P1131 时态同步
  • 原文地址:https://www.cnblogs.com/DreamFather/p/11327013.html
Copyright © 2011-2022 走看看