通过属性绑定的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. 温故而知新 js 点击空白处关闭气泡

    诀窍1:使用el.contains(e) 来判断点击的区域诀窍2:使用mouseup 诀窍3:完成之后,移除事件 showpopover (e) { this.popover = !this.popo ...

  2. spring in action小结4.1

    1 横切关注点:可以被描述为影响应用多处的功能.横切关注点可以被模块化为特殊的类,这些类被称为切面. 2 AOP自己的术语,通知(Advice).切点(pointcut).连接点(joinpoint) ...

  3. WCF实现RESTFul Web Service

    共同学习了前面一些概念,终于开始正题了哈.RESTful的Web Service调用直观,返回的内容容易解析.这里先会描述一个简单的场景--Web Service提供一个方法来搜索个人信息,传入人名, ...

  4. 编译g++后更新libstdc++.so.6链接

    若不更新链接,运行时可能会发生错误: ./a.out: /usr/lib/libstdc++.so.6: version `GLIBCXX_3.4.14' not found (required by ...

  5. Vmware linux 无法上网

    流程如下: 1)点击 VM->Settings Hardware选项卡下面 2)点击Network Adapter 设置如下图所示,首先我们在虚拟机中将网络配置设置成NAT, 3.进入Windo ...

  6. 批处理-IF详解

    在CMD使用IF /?打开IF的系统帮助(自己看我就不全部列出来了),我们会发现IF有3种基本的用法! IF [NOT] ERRORLEVEL number command IF [NOT] stri ...

  7. 【sql绕过】Bypass waf notepad of def

    文章是通过阅读<[独家连载]我的WafBypass之道 (SQL注入篇)>写的阅读笔记. Waf的类型 1.云waf云waf通常是CDN包含的waf,DNS在解析的时候要解析到cdn上面制 ...

  8. JAVA数据库连接池的革命 -- 从BoneCP到HikariCP

    从BoneCP到HikariCP 今天笔者本想更新一下项目中使用到的BoneCP版本的.却无意发现jolbox网站打不开了.起初以为是被墙掉了,经过一番查找,居然在BoneCP的Github站看到了如 ...

  9. webservice文件上传下载

    使用DataHandler实现webservice的文件上传下载 服务端代码: package com.hello.weChat.controller; import javax.activation ...

  10. sql server自定义函数

    CREATE function [dbo].[f_testFunc]( ) ,) ) ) as begin ); ); ); ); SELECT @str_id = a.id,@str_code = ...