angular中innerHTML的样式问题

angular会对css文件的样式进行处理

例如下图就是被处理过的样式

---

使用innerHTML插入dom时标签都是原生标签，是无法匹配到css样式的，而且dom上的style样式也会被清除，所以innerHTML内容是没有样式的。 但撒并不是意味着我们就无法给他设置样式，具体操作如下

在要插入的组件的ts的注解上面添加encapsulation: ViewEncapsulation.None,如下： @Component({ selector: 'app-article', templateUrl: './article.component.html', encapsulation: ViewEncapsulation.None, styleUrls: ['./article.component.css'] }) 插入html 设置样式即可 查看样式

新的问题

虽然插入dom的样式解决了，但是新的问题也随之而来了，由于修改后的css内容不由angular进行特殊处理了，改css样式瞬间变成了全局样式，其他页面的样式也会因为你访问这个页面后而改变样式。所以这是一个不太合理的解决方案。特此记录。

欢迎关注小海博客