angular2/4 使用[innerHTML]时样式不生效

首先默认情况下，innerHTML会被认为是不安全的，因此屏蔽掉了样式。

不生效场景

我们通过innerHTML引入一段html格式的文本，文本中有style样式，目标是希望字体是红色的，而实际效果却仍然是默认的黑色。

TS文件

import { Component, OnInit } from '@angular/core';
@Component({selector: 'app-inner-html',templateUrl: './inner-html.component.html',styleUrls: ['./inner-html.component.css']
})
export class InnerHtmlComponent implements OnInit {constructor() { }content = '<span>'+'<strong>'+'<span style="font-size: 50px;color:red">'+'把啦啦啦'+'</span>'+'</strong>'+'</span>'ngOnInit() {}
}

html文件:

<div [innerHTML]="content"></div>

未达到预期，仍是黑色字体，效果图：

通过管道转义

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);}
}

然后在app.module中引入一下:

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

最后在html文件中使用:

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

这次生效了，效果如下：

angular2/4 使用[innerHTML]时样式不生效相关推荐

vue 不生效打包样式_Vue打包部署到Nginx时,css样式不生效的解决方式
今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题: Vue-cli项目在本地使用 npm run dev的时候,页面样式是可以正常加载出来的,但是我将Vue-cl ...
使用UI框架时 css不生效使用/deep/完美解决避免污染全局样式
使用UI框架时 css不生效完美解决避免污染全局样式使用前端UI框架时在页面上单独修改css 但是不生效都是在 <style scoped> </style>这样的模式 ...
【Qt】使用QPalette设置按钮颜色时，不生效
1.问题描述在练习QStylePlugin示例时,通过插件将按钮颜色设置为红色,但是没有效果,原因是: 使用QPalette设置按钮颜色时,不生效,代码如下 QPalette.setBrush(QP ...
解决： Vue 项目本地运行 run 与服务器上 build 样式不一致，build 后样式不生效
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. PS:本人遇到这个问题是用文中最后一句话解决:" 在组件的样式中记得添加 'scoped' ...
uniapp-自定义导航栏样式不生效问题(一)
刚接触uniapp不久,这是我踩到的最心酸的坑T^T 1.我设置了一个自定义组件,用作导航栏,结果出bug了,如下图: 2.首先,h5端是完全没有问题的,可以正常显示,就是微信开发者工具排版错乱了 3 ...
Vue 之解决v-html生成的元素不能触发@click等vue事件和CSS样式不生效的方法
一.简介官方文档: 通过上面官方文档的介绍我们可以得知两个重点: ① 通过v-html生成的页面元素,不会被当做Vue模板进行编译,只会作为普通的html代码被插入,也就是说通过v-html插入的h ...
(Select)解决：Element-ui 中的 Select 组件用(深度)选择器修改默认样式不生效的问题及如何使用 popper-append-to-body=“false“ 属性
1.存在修改默认样式不生效问题的展示: A.问题一:虽然通过深度选择器修改了下拉框的背景等样式问题却没有展示: B.问题二:渲染后的 dom 元素并不在 #app 元素内部: // 发现:修改下拉框默 ...
vue修改html片段的样式无效,vue 组件中添加样式不生效的解决方法
如何产生在开发项目中遇到在组件中添加样式不生效的情况.具体场景如下 vue 组件 //我用js在上面div标签中插入一个 text goes here export default { ... mo ...
解决 VUE：本地运行和服务器上运行样式不一致，run、build 运行时样式有出入
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 我的情况: 我遇到 2 种情况,一个是表格的分页样式有变化.另一个是导航菜单样式有变化. 2. ...

angular2/4 使用[innerHTML]时样式不生效

不生效场景

通过管道转义

angular2/4 使用[innerHTML]时样式不生效相关推荐

最新文章

热门文章