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主从不一致情形与解决方法
参考:https://blog.csdn.net/hardworking0323/article/details/81046408 https://blog.csdn.net/lijingkuan/a ...
- 【iOS开发之Objective-C】书签管理器项目
1.项目 新建一个书签管理器的项目,能够存储书签的网址.中文名.星级.訪问量和权限信息.具有增.删.改.查和排序的功能. 2.找对象,抽象类 书签管理器,书签管理器.书签管理器-- 多读几次书是不是 ...
- java中成员变量、代码块、构造函数运行顺序
1.java虚拟机执行程序,首先须要装载类,安装现装载父类,初始化父类的静态代码块和静态成员变量 再load子类. 初始化子类静态代码块和成员变量 2.load完成父类与子类后,从main函数入口运行 ...
- UIButton 按钮控件-IOS开发 (实例)
转自:http://justcoding.iteye.com/blog/1467999 UIButton是一个标准的UIControl控件,所以如果你对UIControl不甚了解还是先看一下我的另一篇 ...
- Redis 学习笔记四 Mysql 与Redis的同步实践
一.测试环境在Ubuntu kylin 14.04 64bit 已经安装Mysql.Redis.php.lib_mysqludf_json.so.Gearman. 点击这里查看测试数据库及表参考 本文 ...
- linux之backtrace
backtrace用于打印函数调用堆栈 /******************************************************************************* ...
- spring-boot 集合mybatis 的分页查询
spring-boot 集合mybatis 的github分页查询 一.依赖包 <!-- mysql 数据库驱动. --> <dependency> <groupId&g ...
- mysql实现topN top1
有时会碰到一些需求,查询分组后的最大值,最小值所在的整行记录或者分组后的top n行的记录,像在hive中是有窗口函数的,可以通过它们来实现,但是MySQL没有这些函数,可通过下面的方法来实现 1.准 ...
- msf提权命令/meterpreter下的几个命令
废话: 今天本来日学校内网.以为是台08.结果稀里糊涂居然日了宿舍哥们儿的PC机.按道理都该装杀毒的才对,我舍友都不装的.裸装上阵说的就是我舍友了.劝各位大佬.把杀毒装好.补丁打好. 通过这次我也学到 ...
- 转:PHP获取浏览器类型及版本号
function getBrowser(){ $agent=$_SERVER["HTTP_USER_AGENT"]; if(strpos($agent,'MSIE')!==fals ...