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. ...
随机推荐
- vue $http请求服务
vue中的$http服务 需要引入一个叫vue-resource.js的文件,因为vue.js中没有$http服务.如果需要使用这个服务去百度下载vue-resource.js 然后引进项目即可. ...
- cocos2d-x与ISO内存管理(转)
一,IOS与图片内存 在IOS上,图片会被自动缩放到2的N次方大小.比如一张1024*1025的图片,占用的内存与一张1024*2048的图片是一致的.图片占用内存大小的计算的公式是:长*宽*4.这样 ...
- 03、同事分享课程的笔记 —《Android应用低功耗设计》
这是安卓组的同事一个月前分享的一节课程,听课时写了一下笔记,之前是写在本子上的,感觉内容挺不错 的,就保存在博客了吧,方便回看. 他曾经在就职于英特尔公司,是与芯片设计相关的,这课程标题虽然是与安卓相 ...
- 错误:undefined reference to `__gxx_personality_v0'
使用gcc编译C代码,引用了C++ 库,出现这个错误,网上搜到这哥们的文章,解决问题 转自:错误:undefined reference to `__gxx_personality_v0' 1. Li ...
- cf339d Xenia and Bit Operations
Xenia and Bit Operations Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & ...
- CSS学习笔记(11)--Flex 布局教程:语法篇
原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 ...
- QT 4.8.5 源代码目录调整
* 前言: 有一个代码比较乱的 QT 源码,我想让它分目录整理一下,特此记录一下. * 在原来的代码里面,里面很多文件都是在主文件里面,这样做的话不好维护以及整理 network 里面所有的文件都是和 ...
- Unity3D中UGUI使用ScrollBar之后保存,工程启动报错原因跟踪
笔者不久前将Unity3D版本更新为4.6.2之后.在使用新UI的时候发现关闭项目之后经常再次打开项目会出现一对的报错. 找了一圈,发现是ScrollBar控件出现了BUG.整个空间的滑块消失了. 在 ...
- HeadFisrt 设计模式03 装饰者
类应该对扩展开放, 对修改关闭. 所谓装饰者模式, 是指用其他的类来装饰某个类, 装饰者说白了就是使用 has-a 来代替 is-a 隐喻 咖啡店, 有很多种咖啡, 咖啡里还要增加一些 milk, 面 ...
- C++ 构造函数的对象初始化列表
//构造函数的对象初始化列表 #define _CRT_SECURE_NO_WARNINGS #include<iostream> using namespace std; class P ...