为什么angular会自动添加不必要的标签？

Question

我想用以下CSS编辑我的分页CSS：

<style>
.ngx-pagination a{
    margin: 0 3px ! important;
    color: #9B9B9B ! important;
    font-weight: bold ! important;
    border: solid 1px #ccc ! important;
    border-radius: 4px ! important;
    text-decoration: none ! important;
}
</style>

但是我不知道为什么在运行我的angular项目并检查我的浏览器之后，我在我的css [_ngcontent-c3]上得到了这个选择器。

​

​

为什么angular要自己添加这个不必要的选择器呢？我不知道怎么去掉这个

Answer 1

使用ViewEncapsulation.Emulated时会添加_ngcontent-c#属性-这是默认设置。

Angular使用这些属性来针对具有样式的特定元素。编号c是主机组件的一种唯一标识符。例如，如果您有两个具有以下模板的组件：

ComponentA
<span></span>
<comp-b></comp-b>

ComponenB
<h1></h1>

Angular将使用_ngcontent-c1将所有在组件A中具有样式的元素标记为_ngcontent-c0，并将所有在组件B中具有样式的元素标记为_ngcontent-c1

<comp-a>
    <span _ngcontent-c0></span>
    <comp-b _ngcontent-c0>
        <h1 _ngcontent-c1></h1>
    </comp-b>
</comp-a>

Answer 2

这是由于模拟视图封装造成的。请在此处查看更多信息angular.io/guide/component-styles#view-encapsulation

要删除它，请使用：

encapsulation: ViewEncapsulation.None

在组件装饰器函数中。但是，这将删除css组件的封装。换句话说，您的css将不是独立的，它可能会受到其他样式的影响。