通过属性绑定的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. java web中get请求中文乱码在filter中解决

    之前已经讲过get或者post方法的中文乱码问题,之前都是在每个方法中编写设置编码.如果程序变大,就会很繁琐,使用filter可以避免这种繁琐. 1)写一个encodingFilter进行编码设置 p ...

  2. [svc]entrypoint.sh shell脚本解析

    最近搞influxdb绘图,看到其dockerfile的entry.sh,无奈看的不是很懂. 于是查了下.. docker run 通过传参实现配置文件覆盖 实现启动镜像时候可指定配置文件 如果不指定 ...

  3. [svc]salt-grains

    用途 1,匹配客户端 2,配置文件里使用 3,资产管理 定义grains方法1: 方法2:

  4. 每日英语:China's Bad Earth

    In Dapu, a rain-drenched rural outpost in the heart of China's grain basket, a farmer grows crops th ...

  5. 0077 web.xml中配置Spring MVC时,Servlet-name上报Servlet should have a mapping的错误

    这次是手工建立的web工程目录,在配置webapp/WEB-INF/web.xml的Spring MVC的DispatcherServlet时,在servlet-name上报错:Servlet sho ...

  6. JAVA-Word转PDF各种版本实现方式

    当下做一个项目,就是各种操作office,客户的需求总是各种不按常理,来需求就得搞啊.对JAVA操作office这方面真是头大,弟弟是真滴不懂不会啊.无奈只好试啊试的.网上一大堆好使的,一大堆不好使的 ...

  7. jquery 情况form表单的所有内容

    #project_file_upload 为表单的id $(':input','#project_file_upload') .not(':button, :submit, :reset, :hidd ...

  8. js delete

    在开始之前,先让我们看一段代码 >>> var sum = function(a, b) {return a + b;} >>> var add = sum; &g ...

  9. 删除outlook配置信息

    1.输入“Win+R”组合键,在弹出的窗口中输入:control,打开控制面板 2.找到“邮件”选项,并单击 3.在弹出的窗口中,单击“显示配置文件”选项,删除配置文件夹,OK.

  10. C# Dictionary 复制

    Dictionary<string, int> dictionary = new Dictionary<string, int>(); dictionary.Add(" ...