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. ...
随机推荐
- SignalTap ii的使用
1.实现原理 SignalTap II获取实时数据的原理是在工程中引入Megafunction中的ELA(Embedded Logic Analyzer),以预先设定的时钟采样实时数据,并存储于FPG ...
- 李洪强漫谈iOS开发[C语言-053]-小结
/* 已经学习过的C语言语法 01 基本C程序结构 int main (void) int main(int argc,char *arv){...} 02 基本语句(输入输出) 基本头文件: #in ...
- jquery 怎么触发select的change事件
可以使用jQuery的trigger() 方法来响应事件 定义和用法 trigger() 方法触发被选元素的指定事件类型. 语法 $(selector).trigger(event,[param1,p ...
- 使用eclipse进行web开发的3个lib文件夹
1.右击project>Build Path>Configure Build Path(一般是在你的项目文件夹中手动创建一个lib文件夹,里面设置若干子文件夹存放不同的jar包,然后通过C ...
- centos IPTables 配置方法
entos IPTables 配置方法 http://os.51cto.com/art/201103/249359_1.htm iptables 指南 1.1.19 http://www.frozen ...
- 跟着百度学PHP[10]-读取COOKIE案例
<?php if(!isset($_COOKIE['visittime'])){ #使用$_COOKIE获取visittime,如果不存在就执行下面的语句块,否则执行else setcookie ...
- 网桥bridge
1. 网桥基础 什么是网桥 网桥将多个网络在数据链路层连接起来.网桥的前身是集线器或中继器.网桥和集线器的区别:集线器上各端口都是共享同一条背板总线的,网桥的两个端口分别有一条独立的交换信道,不是共享 ...
- KMP + 求最小循环节 --- HUST 1010 - The Minimum Length
The Minimum Length Problem's Link: http://acm.hust.edu.cn/problem/show/1010 Mean: 给你一个字符串,求这个字符串的最小循 ...
- sql 使用整理
今天使用视图查询东西,为了方便直接select * 查出来的都行全部都错乱了,看来sql 超过20个以上的字段为了效率和安全,禁止用select * -------------查一个表的所有字段的-- ...
- 关于Unity中的新手编码技巧
写代码遇到报错,问题怎么办?怎么查看unity代码的接口?函数参数不记得了怎么办? 解决方法: 1.选择不懂的函数或类,按F12,跳转到代码的定义,自己去看就可知道了. 2.有的时候,选择一个函数,按 ...