通过属性绑定的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. X86平台简称

    1.PCH:PCH全称为Platform Controller Hub,是intel公司的集成南桥.AMD SB700/710/750  http://support.amd.com/TechDocs ...

  2. 每日英语:The Upside of Favoritism

    As the head of the entertainment division of a major public-relations firm in New York, Janelle was ...

  3. vue 单元测试

    单元测试 配置和工具 任何兼容基于模块的构建系统都可以正常使用,但如果你需要一个具体的建议,可以使用Karma进行自动化测试.它有很多社区版的插件,包括对webpack和browserify的支持. ...

  4. Dubbo源代码实现三:注册中心Registry

    我们知道,对于服务治理框架来说,服务通信(RPC)和服务管理两部分必不可少,而服务管理又分为服务注册.服务发现和服务人工介入,我们来看看Dubbo框架的结构图(来源网络): 图中可以看出,服务提供者P ...

  5. oracle 表空间 数据文件 表的关系

    数据文件是表空间的容器,增加数据文件是增大表空间的容量,而不是往表空间里添加数据因此数据文件肯定能添加,如果表空间用完了,再添加新的数据就会报错你可以这样理解,数据库是一个箱子,表空间是箱子里的抽屉, ...

  6. SQLite的连接字符串

    SQLite的连接字符串 Basic(基本的)     Data Source=filename;Version=3;Using UTF16(使用UTF16编码)    Data Source=fil ...

  7. 基于html5制作3D拳击游戏源码下载

    今天给大家分享一款基于HTML5实现的3d拳王游戏源码.这款实例适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 在线预览 ...

  8. Pgsql特殊排序

    对字段值为A,B,C,D的时候进行特殊排序. CASE WHEN aa = 'H' THEN ' WHENaa = 'O' THEN ' ELSE aa END 对数字进行排序,升序,0排到最后面 C ...

  9. RabbitMQ之任务队列【译】

    在第一个教程里面,我们写了一个程序从一个有名字的队列中发送和接收消息,在这里我们将要创建一个分发耗时任务给多个worker的任务队列. 任务队列核心思想就是避免执行一个资源密集型的任务,而程序要等待其 ...

  10. DRBD安装配置、工作原理及故障恢复

    一.DRBD简介 DRBD的全称为:Distributed ReplicatedBlock Device(DRBD)分布式块设备复制,DRBD是由内核模块和相关脚本而构成,用以构建高可用性的集群.其实 ...