问题背景

我有这样的一段数据

const content= '<span class="highLight">sss</span>' 

其css和html的结构分别如下：

• html

<li [innerHtml]='content'> </li>

• css

.highLight{
      color: blue;
  } 

本来预期变量content里的内容能展示成蓝色的，但实际看效果时，还是黑色字。在检查了css里的设置层级和html里的层级一致后，我陷入了沉思，后面才搜到问题原因：

解决方法

因为angular会给你的class加前缀，所以你真实展示时样式可能就是xxx-highLight这种形式了，而要想避免出现这种情况，你需要在你这个组件的@Component里加上encapsulation: ViewEncapsulation.None就可解决问题,

e.g,

@Component({
  ....,
  encapsulation: ViewEncapsulation.None
})