角度：一个组件的CSS与另一个组件冲突。

我的项目层次结构如下所示：

Component_HomePage
   |
   |---> Component_Tool1
   |        |
   |        ---> Component_Inner_01
   |
   |---> Component_Tool2
            |
            ---> Component_Inner_02

显然，所有组件都有不同的样式

虽然在

Component\u Inner\u 01

和

Component\u Inner\u 02

中有一些CSS类，它们的名称相同，但内容不同

例如：

组件\u Inner\u 01.CSS具有

列表组项

类

.list-group-item{
    padding: 0px;
}

而且组件_internal_02.CSS也有

列表组项

，但内容不同

.list-group-item{
    padding: 10px;
}

因此，当我第一次浏览

Component\u internal\u 01

时，列表组项将填充设置为0px，这非常完美

但是，当我在查看

Component\u Inner\u 01

页面后查看

Component\u 02

页面时，Component\u Inner\u 01的列表组项目类的填充为10px

我发现问题出在

Component\u internal\u 02

组件\u internal\u 02的装饰器具有元数据

封装

，该元数据设置为

视图封装。无

---

但是我不知道当使用

封装：ViewEncapsulation时，是什么使CSS类相互冲突。没有任何人可以解释吗？
您可以创建一个包装器元素并给它一个Id，使用该Id为特定组件提供样式。第二个组件也是如此。这样样式就不会一个接一个地产生冲突

<div id="component1">
    //Component1 code here
</div>

<div id="component2">
    //Component2 code here
</div>

视图封装意味着您的视图被封装：这意味着Angular将随机属性添加到标记中，以将它们彼此区分开来

如果使用
封装：ViewEncapsulation.None
，则视图不再被封装：样式没有随机属性，并且开始冲突

如果要停止该操作，请从组件中删除该行

CLI提供了一个名为
style.[extension]
的全局样式表，您可以在其中放置所有全局样式。您不需要停用封装
 不要像#trichetriche所说的那样移除线路，而是使用必要的封装机制

FYI

ViewEncapsulation.Emulated
：我们在组件上定义的任何样式都不会泄漏到应用程序的其余部分。
但是，该组件仍然继承了twitter引导之类的全局样式

ViewEncapsulation.Native
：我们在组件上设置的样式不会泄漏到组件范围之外。
组件也与我们为应用程序定义的全局样式隔离开来

查看封装。无
：我们没有封装任何东西，
我们在组件中定义的样式已经泄漏，并开始影响其他组件。
我建议您阅读
模拟的
值是什么，以便您更好地理解
无
（样式将不限于
无
的组件），因此基本上，您可以看到他删除了内置封装，你让他做手工的？这有点适得其反……有道理！非常感谢：）
#component1 .list-group-item {
    padding: 0px;
}

#component2 .list-group-item {
    padding: 10px;
}