通过属性绑定的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. Mysql 数据库数值类型详解

    MySQL 支持所有标准SQL 中的数值类型,其中包括严格数值类型(INTEGER.SMALLINT.DECIMAL 和NUMERIC),以及近似数值数据类型(FLOAT.REAL 和DOUBLE P ...

  2. centos 无法ping内网 Destination Host Unreachable

    centos 突然无法ping内网了. 本来是一直是好好的. 在这之前,当前服务器(centos 192.168.1.30)大量的在操作内网192.168.1.20服务器的数据库.. 会不会是流量大了 ...

  3. 如何隐藏你的 Linux 的命令行历史

    如果你是 Linux 命令行的用户,有的时候你可能不希望某些命令记录在你的命令行历史中.原因可能很多,例如,你在公司担任某个职位,你有一些不希望被其它人滥用的特权.亦或者有些特别重要的命令,你不希望在 ...

  4. 用C语言(apue)实现 把时间戳转换为国标格式的字符串(2017-07-17 22:36:12)的函数

    /*******************************************************************************/ /** *** 函 数 名: cha ...

  5. android版本号始终为1

    之前用Eclipse里时,版本号是检查是做如下 <manifest xmlns:android="http://schemas.android.com/apk/res/android& ...

  6. spark源码 hashpartitioner

    def nonNegativeMod(x: Int, mod: Int): Int = { val rawMod = x % mod rawMod + () mod ) def getPartitio ...

  7. Unix系统编程()执行非局部跳转:setjmp和longjmp

    使用库函数setjmp和longjmp可执行非局部跳转(local goto). 术语"非局部(nonlocal)"是指跳转目标为当前执行函数之外的某个位置. C语言里面有个&qu ...

  8. sama5d3 环境检测 gpio--yx测试

    说明: yx0--pioA0 yx1--pioA2  yx2--pioA4  yx3--pioA10  yx4--pioA14  yx5--pioA16 yx6--pioA12 yx7--pioA20 ...

  9. Android——寄存器和存储器的区别

    寄存器和存储器的区别   从根本上讲,寄存器与RAM的物理结构不一样. 一般寄存器是指由基本的RS触发器结构衍生出来的D触发, 就是一些与非门构成的结构,这个在数电里面大家都看过: 而RAM则有自己的 ...

  10. rsync详解之exclude排除文件

    rsync详解之exclude排除文件 问题:如何避开同步指定的文件夹?  --excludersync  --exclude files and folders http://articles.sl ...