通过属性绑定的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. python 多线程爬虫 实例

    多进程 Multiprocessing 模块 Process 类用来描述一个进程对象.创建子进程的时候,只需要传入一个执行函数和函数的参数即可完成 Process 示例的创建. star() 方法启动 ...

  2. Spring注解@ResponseBody,@RequestBody

    @RequestBody 将HTTP请求正文转换为适合的HttpMessageConverter对象. @ResponseBody 将内容或对象作为 HTTP 响应正文返回,并调用适合HttpMess ...

  3. IOS基于XMPP协议开发--XMPPFramewok框架(一):基础知识

    最近蘑菇街团队的TT的开源,使我对im产生了兴趣,然后在网上找到了XMPPFramework进行学习研究, 并写了以下系列教程供大家参考,有写的不对的地方,请大家多多包涵指正. 目录索引 IOS基于X ...

  4. 宏里面的(void)0

    在<c标准库>实现assert.h中有一个语句: #define assert(test) ((test)?(void)0 : _Assert(__FILE__":"_ ...

  5. 【Android】14.3 浏览手机中的所有文件夹和文件

    分类:C#.Android.VS2015: 创建日期:2016-02-27 一.简介 前面我们了解了内部存储.外部存储的含义,用一句话说,内部存储实际上是保存在"data"文件夹下 ...

  6. Elastic_Terms 内容分类统计

    Terms 按字段的值进行分类,并计算出doc_count, bucket聚合 类似于 group by 常用统计 分类并出现频率高的,并进一步挖出,计算出想要的数据. 参考资料 https://ww ...

  7. 解决Cocos2d-x3.0、3.1 &quot;_opendir$INODE64&quot;symbol(s) not found错误

    升级系统和XCode后.在IOS8上编译之前的项目会报例如以下错误: Undefined symbols for architecture x86_64: "_opendir$INODE64 ...

  8. 动态修改 dom 元素的伪类样式

    最近写代码,需要修改伪类的 content 属性,不想定义两个样式进行切换,而是直接通过 js 进行修改. html 中的伪类(如 a:hover / a:link / class::before / ...

  9. 手把手教做Excel直方图

    手把手教做Excel直方图 2017-10-05  作者:ExcelHome  阅读:71968次   直方图是用于展示数据的分组分布状态的一种图形,用矩形的宽度和高度表示频数分布,通过直方图,用户可 ...

  10. hadoop之mapreduce编程实例(系统日志初步清洗过滤处理)

    刚刚开始接触hadoop的时候,总觉得必须要先安装hadoop集群才能开始学习MR编程,其实并不用这样,当然如果你有条件有机器那最好是自己安装配置一个hadoop集群,这样你会更容易理解其工作原理.我 ...