通过属性绑定的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. Python实现百度搜索并保存到本地示例,Python实现百度搜索

    实现百度搜索并保存到本地 User_Agent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko ...

  2. django 官方文档下载

    今天发现自己的django文档有点过时了,于是想去下载一份新,找了老半天才找到pdf的下载地址:于是把它记录下来,希望以后可以直接用. 一.进行django官方网站: 二.文档的pdf文件就在docu ...

  3. poj1936

    非连续子串匹配题,直接模拟 /** \brief poj 1936 * * \param date 2014/8/5 * \param state AC * \return memory 804k t ...

  4. ruby gem tips(转)

    淘宝源: https://ruby.taobao.org 升级ruby gem gem update --system 查看gem版本 gem -v 查看gem版本,gems安装目录,remote s ...

  5. C++ 简单的日志类

    用法如下: #include "EasyLog.h" int main(){ EasyLog::Inst()->Log("Run..."); } 不只是m ...

  6. js基本知识3

    1. 函数 function 函数的声明 函数的 调用 函数的传参 2. 函数返回值 Return 返回结果 返回给函数 Id 函数 function $id(id) { return documen ...

  7. javac编译出来的程序运行报错“错误: 找不到或无法加载主类”

    使用javac编译java文件生成class文件 >javac HelloWorld.java执行class文件>java HelloWorld 原因: 含有包名 解决办法: 按照包的结构 ...

  8. JS学习笔记(5)--一道返回整数数组的面试题(经验之谈)

    说明: 1. 微信文章里看到的,作者是马超 网易高级前端技术经理,原文在网上搜不到,微信里可以搜“为什么你的前端工作经验不值钱?”,里面写着“转载自网易实践者社区”.(妈蛋,第二天网上就有了http: ...

  9. 一款基于jQuery和HTML5全屏焦点图

    今天爱编程小编给大家分享一款非常绚丽的jQuery焦点图插件,同时这款焦点图也利用了HTML5和CSS3的相关特性,使图片切换效果更加丰富多彩.另外,这款jQuery焦点图插件的特点是全屏的效果,因此 ...

  10. 正则 群组 Group

    static void Main(string[] args) { string strUrl = "<a href=\"user.php?act=order_detail& ...