_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开发者控制台上，我注意到当元素在框外渲染时，它具有以下规则：

在组件内部时，它呈现以下方式：

摘要，“ _ 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隐藏了这些类并将它们限制为仅针对这些类编写的组件。在Angular中称为ViewEcapsulation。

来自Angular's Documentation：

模板和CSS样式的封装策略。之一：

• ViewEncapsulation.Native：使用阴影根。仅当 在平台上本地可用。
• ViewEncapsulation.Emulated：使用 填充CSS，以模仿本地行为。
• ViewEncapsulation.None：不使用任何封装即可使用全局CSS。

默认情况下，您在.css文件中为某个组件定义的类仅可用于该组件。如果要在其他组件中使用它，则它将不可用。 Angular会自动将这些texts添加到类中，以便在组件外部无法访问它们。

thoughtram.io上有一篇非常有启发性的文章，您可以阅读here来更好地理解。