angular 2+ innerHTML属性中内联样式丢失
通过属性绑定的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属性中内联样式丢失的更多相关文章
- react中内联样式的z-index不起作用.
<div style={{z-index: -100}} > hello,money. </div> 以上z-index样式如上写法是不起作用,原因是在react中内联样式的写 ...
- vue.js中内联样式style三元表达式
<span v-bind:style="{'display':config.isHaveSearch ? 'block':'none'}" >搜索</span&g ...
- vue 内联样式style中的background
在我们使用vue开发的时候 有很多时候我们需要用到背景图 这个时候会直接使用 内联样式 直接把你拿到的数据拼接上去 注意 在vue中直接使用style时 花括号一定别忘记 还有就是你的url一定 ...
- DOM与元素节点内联样式
获取.设置及移除单个内联 CSS 属性 每个 HTML 元素都有个 style 属性,可以用来插入针对该元素的内联 CSS 属性. <div style='background-color:bl ...
- 你真的知道css三种存在样式(外联样式、内部样式、内联样式)的区别吗?
css样式在html中有三种存在形态: 内联样式:<div style="display: none"></div> 内部样式: <style> ...
- v-bind指令动态绑定class和内联样式style
动态绑定class—概述 数据绑定(v-bind指令)一个常见需求是操作元素的 class 列表.因为class是元素的一个属性,我们可以用 v-bind 处理它们 我们只需要计算出表达式最终的字符串 ...
- JavaScript 获取和修改 内联样式
JavaScript 获取和修改 内联样式 版权声明:未经授权,严禁转载分享! 元素的样式 HTML 元素的 style 属性返回一个 CSSStyleDeclaration 类型的对象. Style ...
- html中内联元素和块元素的区别、用法以及联系
昨天用asp.net的BulletedList做一个导航栏,最终该控件形成的html代码是ul列表和a超链接,具体代码如下: <ul id="BulletedList1" s ...
- JS获取内联样式
JS获取内联样式 //获取内联样式 function getCss(obj,attr){//obj:对象,name:style属性 if(obj.currentStyle) { return obj. ...
随机推荐
- MySQL replace into 用法
讨人喜欢的 MySQL replace into 用法(insert into 的增强版) 在向表中插入数据的时候,经常遇到这样的情况:1. 首先判断数据是否存在: 2. 如果不存在,则插入:3.如果 ...
- svnserver权限问题
打开visualSVN server 右键Users,新建user/Create user 输入username.password.确认password.依据须要建立对应的用户 右键Groups,新建 ...
- hdoj 1272 小希的迷宫 又一个并查集的简单应用
小希的迷宫 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- eclipse 安装maven
在使用eclipse自带插件的方式安装 http://download.eclipse.org/technology/m2e/releases/ 点击help-->install new sof ...
- JDK默认使用的垃圾回收器
查看方法java -XX:+PrintCommandLineFlags -version 引用<深入理解Java虚拟机:JVM高级特性与最佳实践>的介绍: 所以,jdk8环境下,默认使用 ...
- noj1475(递推题)统计多少个1
http://acm.nbut.cn/Problem/view.xhtml?id=1475 题意:给出一个数,需要你统计在这个数范围内有多少个1........ 思路:从高位到低位计算,例如1312 ...
- linux 密码破解
(一)Linux 系统密码破解 1.在grub选项菜单按E进入编辑模式 2.编辑kernel那行 /init 1 (或/single) 3.按B重启 4.进入后执行下列命令 root@#passwd ...
- 16C554在LINUX上的移植(AT91)
16C554在LINUX上的移植(AT91) linux版本:3.14.17 AT91SAMa5d36 EINTA_0 ARM-IO5 PA14 14 EINTA ...
- Python高级编程之生成器(Generator)与coroutine(一):Generator
转载请注明出处:点我 这是一系列的文章,会从基础开始一步步的介绍Python中的Generator以及coroutine(协程)(主要是介绍coroutine),并且详细的讲述了Python中coro ...
- Linux(centOS)手动安装删除Apache+MySQL+PHP+Memcached原创无错版
=================== 第一步:Apache安装 =================== 下载 去 http://www.apache.org 自己找最新的 国内有很多镜像点例如人人和 ...