通过属性绑定的innerHTML,把字符串里面的html解析

解析是没问题的,但一些内联样式会丢失掉

为了不丢掉样式,需要自定义一个管道来解决这个问题

html.pipe.ts

import {Pipe, PipeTransform} from "@angular/core";
import {DomSanitizer} from "@angular/platform-browser";
@Pipe({
name: "html"
})
export class HtmlPipe implements PipeTransform{
constructor (private sanitizer: DomSanitizer) {
}
transform(style) {
return this.sanitizer.bypassSecurityTrustHtml(style);
}
}

html使用

<p [innerHTML]="content | html"></p>

angular 2+ innerHTML属性中内联样式丢失的更多相关文章

  1. react中内联样式的z-index不起作用.

    <div style={{z-index: -100}} > hello,money. </div> 以上z-index样式如上写法是不起作用,原因是在react中内联样式的写 ...

  2. vue.js中内联样式style三元表达式

    <span v-bind:style="{'display':config.isHaveSearch ? 'block':'none'}" >搜索</span&g ...

  3. vue 内联样式style中的background

    在我们使用vue开发的时候   有很多时候我们需要用到背景图 这个时候会直接使用 内联样式 直接把你拿到的数据拼接上去 注意  在vue中直接使用style时 花括号一定别忘记 还有就是你的url一定 ...

  4. DOM与元素节点内联样式

    获取.设置及移除单个内联 CSS 属性 每个 HTML 元素都有个 style 属性,可以用来插入针对该元素的内联 CSS 属性. <div style='background-color:bl ...

  5. 你真的知道css三种存在样式(外联样式、内部样式、内联样式)的区别吗?

    css样式在html中有三种存在形态: 内联样式:<div style="display: none"></div> 内部样式: <style> ...

  6. v-bind指令动态绑定class和内联样式style

    动态绑定class—概述 数据绑定(v-bind指令)一个常见需求是操作元素的 class 列表.因为class是元素的一个属性,我们可以用 v-bind 处理它们 我们只需要计算出表达式最终的字符串 ...

  7. JavaScript 获取和修改 内联样式

    JavaScript 获取和修改 内联样式 版权声明:未经授权,严禁转载分享! 元素的样式 HTML 元素的 style 属性返回一个 CSSStyleDeclaration 类型的对象. Style ...

  8. html中内联元素和块元素的区别、用法以及联系

    昨天用asp.net的BulletedList做一个导航栏,最终该控件形成的html代码是ul列表和a超链接,具体代码如下: <ul id="BulletedList1" s ...

  9. JS获取内联样式

    JS获取内联样式 //获取内联样式 function getCss(obj,attr){//obj:对象,name:style属性 if(obj.currentStyle) { return obj. ...

随机推荐

  1. Redis(十九):Redis压力测试工具benchmark

    redis-benchmark使用参数介绍 Redis 自带了一个叫 redis-benchmark 的工具来模拟 N 个客户端同时发出 M 个请求. (类似于 Apache ab 程序).你可以使用 ...

  2. ARM开发工具软件命令具体解释---嵌入式回归第三篇

    先从bootloader開始,由于临时眼下这些都会是裸机程序相关. 本人这里是VMwarm10.0上安装的红帽linux虚拟机.从以下的截图中能够看出 裸机开发流程: 这里先做第三步(第一步第二步已提 ...

  3. 安装配置PhoneGap开发环境(二)——使用Cordova取代PhoneGap创建项目

    1 Cordova是谁 PhoneGap的官方文档说的非常清楚.Cordova是PhoneGap的引擎,这两者的关系类似于WebKit与Chrome浏览器的关系.所以一些核心的基础操作对于Cordov ...

  4. Object-C支持多继承吗?可以实现多个接口吗?Category是什么?

    转自:http://blog.sina.com.cn/s/blog_7afd7d7801016t3t.html Object-C支持多继承吗?可以实现多个接口吗?Category是什么?重写一个类的方 ...

  5. CentOS搭建Nginx+Subversion环境(包括多个版本库的配置)

    Apache Subversion(简称SVN,svn) 因为某种原因我们需要用Nginx作为Subversion的http前端,但目前没有现成的Nginx+Subversion搭配方式. 而Subv ...

  6. python-wechatAutoReword

    python-微信自动回复功能,基于itchat 2017.9.6 实现群@自动回复 #! /usr/bin/env python3.5.2 # coding="utf-8" im ...

  7. Secure REST API with oauth2 (翻译)

    http://blog.csdn.net/haiyan_qi/article/details/52384734 ******************************************** ...

  8. SAP ECC6安装系列四:安装过程详解

    原作者博客 http://www.cnblogs.com/Michael_z/ ======================================== 续接上篇,我们终于按下了 “Next” ...

  9. 使用JSTL的sql:query标签制作分页查询遇到NoSuchFieldError: deferredExpression

    参考:http://hi.baidu.com/desyle/item/4fe650265792d7182a0f1c33 症状: 如题所述,代码如下 <sql:query var="re ...

  10. 突破MIME限制上传

    方法:找一个正常的可上传的查看其的MIME类型,然后将马子的MIME改成合法的MIME即可.