_ngcontent-c0 добавляется в правило css автоматически

Question

Я следовал примеру перетаскивания (вы можете найти его здесь: https://stackblitz.com/edit/draggable-part-6) После реализации кода я попытался переместить «коробку» в компонент.

<div class="box" appDroppable >
  MyBox
  <div class="box box-helper" *appDraggableHelper>MyBox</div>
</div>

И я заметил, что это не правильно отображает. Глядя на консоль Chrome Dev, я замечаю, что когда элемент отображается вне поля, он имеет следующее правило:

Находясь внутри компонента, он выглядит следующим образом:

Сводка, атрибут "_ngcontent-c0" отсутствует в html и, следовательно, правило больше не применяется.

scss определяется следующим образом и не содержит _ngcontent-c0

.box {
  background: #BADA55;
  border: 1px solid black;
  padding: 10px 20px;
  display: inline-block;

  &.dragging {
    background: coral;
  }
}

вопрос в том, почему _ngcontent-c0 добавляется в правило динамически?

Answer 1

Это потому, что Angular скрывает эти классы и ограничивает их только тем компонентом, для которого эти классы написаны. Это называется ViewEcapsulation в Angular.

Из Документация Angular :

Политика инкапсуляции для шаблона и стилей CSS. Один из:

• ViewEncapsulation.Native: использовать теневые корни. Это работает только если изначально доступно на платформе.
• ViewEncapsulation.Emulated: использование Shimmed CSS, который имитирует нативное поведение.
• ViewEncapsulation.None: использовать глобальный CSS без инкапсуляции.

По умолчанию класс, который вы определили в файле .css для компонента, будет доступен только для использования в этом компоненте. Если вы хотите использовать его в каком-либо другом компоненте, он не будет доступен. Angular автоматически добавляет эти texts к классам, чтобы они не были доступны за пределами компонента.

thinkram.io имеет поразительно поучительную статью на эту тему, которую вы можете прочитать здесь , чтобы лучше понять это.