如何使用：在ngClass條件中的主機上下文選擇器？

如果變量爲真（workspace.active這裏）並且祖先元素具有類.home，我想在div（組件的一部分）上設置類active。喜歡的東西：如何使用：在ngClass條件中的主機上下文選擇器？

<div [ngClass]="{'active': workspace.active && ':host-context(.home)', }">

我可以在ngClass這樣的條件表達式中使用某種方式這個僞選擇:host-context？

詳情：

我想在兩個用例使用相同的組件。在這兩種情況下，只有一些CSS屬性應該是不同的。所以我想根據決定在我的組件上定製一個設置在div上的css類：「在dom樹中有一個祖先home」 - 這應該區分這兩種用例。

我可以做這樣的事情在CSS：

:host-context(.home) .active { 
    background-color: #405976; 
}

但隨後含.active類的所有選擇的組合也應結合:host-context和II不想css來增加複雜性，因爲它已經是複雜。我寧願只根據條件設置類.active。在css文件！中，不在代碼中。（這就是爲什麼:host-context最終存在的原因。）

來源

2017-10-12 Dacian

你不能，實際上你不應該。您不應該在基於HTML內容的代碼中做出任何決定。在你的組件中@Input（）一些變量，並根據它決定'主動'類。這是我所能猜到的，因爲你沒有提供任何代碼。 –

好的。我現在知道了。我實現了它，它很好。謝謝。這是更清潔，我同意。 Stil ....我的第一印象是，這種方式最終會增加代碼而不是css代碼的複雜性。如果對於每一個這樣的微小決策，我都會添加一個@Input（有時候也有一些邏輯），我的組件會被「太多的功能」所污染。我寧願讓css儘可能地實現它自己的生活，而不會干擾組件代碼。：主機上下文適用於這種情況。你可以在普通的css中使用它，但不知道如何在css文件中的ngClass表達式中。 – Dacian

你總是可以將它分割成單獨的指令，它將爲你管理一些css，從而清除「主要」組件。 –

在角度上，你不應該在基於html內容屬性（例如類或屬性）的代碼中作出任何邏輯決定 - 反之亦然 - 你應該渲染類和屬性基於數據綁定的html。這是基於數據綁定的角度渲染視圖的主要思想。組件的代碼不應該太在意視圖結構。

因此，在這種情況下，如果您的類應該基於一些外部信息，您需要@Import（）將數據通過數據綁定到您的組件中，然後在ngClass指令中使用組件屬性。是的，它將邏輯移入組件而不是html/css，但這正是它應該是的地方：在模型/控制器代碼中，而不是在視圖標記中。而且，這樣測試這樣一個組件將會更加方便。

來源

2017-10-14 00:17:11

如何使用：在ngClass條件中的主機上下文選擇器？

回答

相關問題