Почему угловые автоматически добавляют ненужные теги?

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>

, но я не знаю, почему после запуска моего углового проекта и проверки браузера я получаю этот селектор на своем css [_ngcontent-c3]

почему угловое добавление этого ненужного селектора само по себе?Я не знаю, как удалить это

Answer 1

Это происходит из-за эмуляции эмуляции представления.Подробнее здесь angular.io / guide / component-styles # view-encapsulation

Чтобы удалить это, используйте:

encapsulation: ViewEncapsulation.None

в функции декоратора компонента.Однако это удалит инкапсуляцию ваших компонентов CSS.Другими словами, ваш CSS не будет независимым, и на него могут влиять другие стили.

Answer 2

_ngcontent-c# атрибуты добавляются при использовании ViewEncapsulation.Emulated - по умолчанию.

Angular использует эти атрибуты для нацеливания на определенные элементы со стилями.Число c является своего рода уникальным идентификатором хост-компонента.Например, если у вас есть два компонента со следующими шаблонами:

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

ComponenB
<h1></h1>

Angular пометит все элементы со стилями внутри компонента A как _ngcontent-c0 и все элементы со стилями внутри компонента B с помощью _ngcontent-c1:

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