Angular5中的伪元素

Question

为什么Angular5中来自CSS的常规伪类无法正常工作？我知道你可以使用像(click)="function1()"或(mouseenter)="function2()"这样的Angular事件处理程序来模仿他们的行为。

我们在Angular中使用常规CSS伪类的原因是什么？

Answer 1

CSS与Angular一起正常工作。

也就是说，Angular为您正在处理的当前组件封装了CSS（无需担心）。它是使用shadow DOM获得的一项功能，但并非所有浏览器都支持这种功能，Angular通过在组件上添加属性来模拟它：

<div _ngcontent-c6>... your content ...</div>

然后您编写的原始CSS将被更改为：

div[_ngcontent-c0] {
  color: red; // for example
}

因此，如果您想编写一些会影响其他组件而不仅仅是当前组件的CSS，您应该将视图封装设置为none：

@Component({
  selector: '...',
  templateUrl: '',
  styleUrls: [''],
  encapsulation: ViewEncapsulation.none
})

或者，如果您有一个角度cli项目，您还可以在以下内容中定义全局样式：styles.scss（或.css）文件，它没有任何视图封装。

在此处查看更多内容：https://angular.io/guide/component-styles#view-encapsulation

（但在关闭此功能之前，请三思而后行，因为它非常有用）