Question

我的项目层次结构如下：

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

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

虽然Component_Inner_01＆amp;中有一些CSS类。 Component_Inner_02名称相同但内容不同。

例如：

具有list-group-item类

的Component_Inner_01.CSS

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

Component_Inner_02.CSS也有list-group-item，但内容是差异。

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

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

但是当我在查看Component_Inner_01页面后查看Component_Inner_02页面时，Component_Inner_01的list-group-item类将填充为10px。

我发现问题出在Component_Inner_02

Component_Inner_02的装饰器，其元数据encapsulation设置为ViewEncapsulation.None

但我不知道在使用encapsulation: ViewEncapsulation.None时，什么使CSS类相互冲突，有人能解释一下吗？

Answer 1

查看封装意味着您的视图已封装：它意味着Angular会将随机属性添加到您的代码中，以便将它们彼此区分开来。

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

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

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

Answer 2

不要将行删除为#trichetriche，而是使用必要的封装机制。

<强> FYI

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

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

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

Answer 3

您可以创建一个包装器元素并为其指定一个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;
}

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

3 个答案: