angular使用innerHtml时style行内样式消失

解决方法:使用[innerHTML]
html:<div [innerHTML]="value"></div>
创建一个pipe文件innerhtmlpipe.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);}
}

然后再在需要的文件的module中引入

import { HtmlPipe } from './inner-html/innerhtmlpipe';@NgModule({declarations: [...HtmlPipe, ...],

最后在html里:

<div [innerHTML]="value | html"></div>

angular使用innerHtml时style行内样式消失相关推荐

VUE动态绑定Css样式、Style行内样式
VUE动态绑定Css样式.Style样式一.背景这两天做的uniapp项目开发的时候遇到了动态写css样式的问题了,因为uniapp的语法是vue的语法,所以uniapp的样式问题主要也就是vue ...
在vue中怎么写行内样式高_13.VUE学习之控制行内样式
vue 测试一测试二测试三 var app = new Vue({ el: "#vue", data:{ red:"red", size:28, div2: ...
vue- style行内样式
style行内样式 :style="变量" :style="{color:'red',width:'100px'}" :style="[可做三元运算判 ...
react中jsx行内样式（style）的国定写法、jsx双花括号{{}}写法的解释
共index.js.index.html. TodoList.js这三个文件,主要看TodoList.js中的Input标签的style样式双花括号{{}}的写法,会在下方做全面的解释运行效果: i ...
将html中的style内联样式转换为行内样式
需求:因为有一段html需要传递到其他的地方,内联样式可能与其他的样式冲突,所以要将写在style标签中的内联样式转换为行内样式思路: /*** 参数接收html字符串* 将内联样式表里面的样式改为 ...
23 - JavaScript 通过style对象设置行内样式
style属性的获取和修改在DOM当中,如果想设置样式,有两种形式: className(针对内嵌样式) style(针对行内样式) 这篇文章,我们就来讲一下style. 需要注意的是:style是 ...
CSS简介、行内样式、内部样式、外部样式、注释、引入其他CSS文件
CSS的发展历程: 起初是没有css的,只有少量样式是可以写在html标签中,这样代码格外显得臃肿,此时CSS就出现了. 初识CSS: CSS(Cascading Style Sheets),被称为C ...
CSS三种样式表：行内样式表、内部样式表、外部样式表
目录一.CSS三种样式表 1.内部样式表 2.行内式(内联样式) 3.外部样式表(外链式) 二.三种样式表的对比三.CSS样式表规则一.CSS三种样式表 1.内部样式表 2.行内样式表(内联式) ...
css的引入方式：行内样式表、内部样式表、外部样式表
内部样式表:(内嵌样式表)是写到html页面内部,是将所有的css代码抽取出来,单独放到一个<style>标签中. <!DOCTYPE html><html lang=& ...

angular使用innerHtml时style行内样式消失

angular使用innerHtml时style行内样式消失相关推荐

最新文章

热门文章