通过属性绑定的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. Jquery.Treeview+Jquery UI制作Web文件预览

    效果图: 前台Html: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="D ...

  2. RPC服务框架dubbo(三):Dubbo支持的协议

    1.Dubbo 1.1 Dubbo官方推荐的协议. 1.2 本质:使用NIO和线程池进行处理. 1.3 缺点:大文件传输时可能出现文件传输失败问题. 2.RMI 2.1 JDK提供的协议,远程方法调用 ...

  3. Lattice 开发工具Diamond 相关版本下载地址

    百度网盘: https://wenku.baidu.com/view/21b98975192e45361066f5f3.html 官网下载: http://www.latticesemi.com/Su ...

  4. beyond compare比较工具设置

    beyond compare用于比较的工具,云盘:比较   链接: https://pan.baidu.com/s/1boZbB0F

  5. hdu1428(记忆化搜索)

    题意:“他考虑从A区域到B区域仅当存在一条从B到机房的路线比任何一条从A到机房的路线更近(否则可能永远都到不了机房了…”这句话一定要理解清楚.就是说,对于当前位置,如果下一个状态与终点的最短距离大于或 ...

  6. 基于js白色简洁样式计算器

    今天给大家分享一款白色简洁样式计算器JS代码是一款精美简洁计算器JS代码插件网页特效,软件应用,后台应用JS计算器插件代码免费下载.适用浏览器:360.FireFox.Chrome.Safari.Op ...

  7. 跟着百度学PHP[9]-session与cookie的异同

    COOKIE cookie是将数据存储在客户端中,以此建立客户端与服务器之间的联系,但是cookie任然有一些局限性: 1.cookie相对不是很安全,容易被盗用导致cookie欺骗. 2.单个的co ...

  8. Unix系统编程()进程内存布局

    每个进程所分配的内存由很多部分组成,通常称之为"段(segment)". 文本段包含了进程运行的程序机器语言指令.文本段具有只读属性,以防止进程通过错误指针意外修改自身指令. 因为 ...

  9. 在.net4的环境下使用Microsoft.AspNet.SignalR.Client 2.4.0

    我的环境是运行在.net 4 framework,并且使用了signalr 在重连的时候发现,运行的服务被关闭了.找不到合适的处理的办法.因为报错是 说明: 由于未经处理的异常,进程终止.异常信息: ...

  10. (壹)、java面向对象详解

    面向对象的概述: 1.用java语言对现实生活中的事物进行描述.通过类的形式来体现的. 2.怎么描述呢? 对于事物描述通常只关注两方面. 一个是属性,一个是行为. 3.成员变量和局部变量的区别: ①成 ...