角度：一個組件的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;
}