angular标签使用[innerHTML]并且解决样式问题以及在ts拼写div,html代码时无法在html页面生成问题

今夜你是我的模特

于 2019-01-08 16:58:26 发布

阅读量6.1k

点赞数 3

分类专栏：前端js技术，问题集合文章标签：管道 pipe [innerTHML] angular中html的样式

本文链接：https://blog.youkuaiyun.com/dalqyou/article/details/86084519

版权

本文介绍了在Angular中如何使用[innerHTML]属性插入动态生成的HTML，并解决样式不生效的问题。提供了两种解决方案，包括直接插入HTML代码和通过自定义管道处理。详细展示了管道的创建和应用过程，帮助初学者理解和掌握这一特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说，刚使用angular不久的同学有时脱离不jq 的使用以及习惯在js中拼好div 然后append到html中，所以发现在angular中这个方法行不通，拼好的div 不能在页面生成。下面直接贴代码，有两种方法

<div [innerHTML]="showHtml" > </div>通过这么写就能把showHtml中拼好的div 展示在html页面中，

ts中：
this.showHtml =   '<p style="font-weight: bold;">1、资源下发提醒</p>' 

**html中：**
 <div [innerHTML]="showHtml " ></div>

到这里就发现是不比通过jq 获取节点然后在$("#xx").append("

") 添加到对应的div下面方便的多了。

但也会发现一个问题就是，没有样式，样式不生效，下面就是贴两种方法的代码

方法一：

**ts:**
在使用的页面引入
import { DomSanitizer } from '@angular/platform-browser';
  constructo