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

Question

我的项目层次结构如下：

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

显然，所有Component都有不同的样式。

尽管Component_Inner_01和Component_Inner_02有一些CSS类，它们的名称相同但内容不同。

例如：

具有list-group-item类的Component_Inner_01.CSS

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

Component_Inner_02.CSS也有list-group-item但内容是diff。

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

因此，当我第一次浏览Component_Inner_01 list-group-item时，填充为0px，这是完美的。

但是，当我在查看Component_Inner_01页面后查看Component_Inner_02页面时， Component_Inner_02列表组项类将填充设为10px。

我发现问题出在Component_Inner_02

Component_Inner_02的装饰器具有设置为ViewEncapsulation.None元数据encapsulation

但是我不知道什么使CSS类在进行encapsulation: ViewEncapsulation.None时彼此冲突encapsulation: ViewEncapsulation.None ，有人可以解释吗？

Answer 1

视图封装意味着您的视图已被封装：这意味着Angular向标签添加随机属性以将它们彼此区分。

如果您使用encapsulation: ViewEncapsulation.None ，那么您的视图将不再被封装：样式没有随机属性，并开始发生冲突。

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

CLI提供了一个名为style.[extension]的全局样式表，您可以在其中放置所有全局样式。 您无需停用封装。

Answer 2

不要像#trichetriche所说的那样删除行，而是使用必要的封装机制。

费耶

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

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

ViewEncapsulation.None ：我们没有封装任何东西，我们在组件中定义的样式已经泄漏出去并开始影响其他组件。

Answer 3

您可以制作一个wrapper元素并为其指定一个ID，使用该ID为该特定组件指定样式。 第二部分也是如此。 这样样式就不会彼此冲突。

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

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

款式

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

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