angular中innerHTML的样式的问题

angular中innerHTML的样式问题

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

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

---

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

1. 在要插入的组件的ts的注解上面添加encapsulation: ViewEncapsulation.None,如下：

@Component({
  selector: 'app-article',
  templateUrl: './article.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./article.component.css']
})

2. 插入html 设置样式即可
   查看样式
   

新的问题

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

欢迎关注小海博客