如何使用：ngClass条件中的主机上下文选择器？

Question

我想在div（组件的一部分）上设置类active，如果变量为true（此处为workspace.active）且祖先元素具有类.home。 类似的东西：

<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组合使用，我不想增加css的复杂性，因为它已经很复杂了。 我更愿意根据条件设置类.active。在css文件中！，而不是在代码中。 （这就是:host-context最终存在的原因。）

Answer 1

在角度中，您不应该基于html内容属性（如类或属性）在代码中做出任何逻辑决策，反之亦然 - 您应该基于数据绑定在html中呈现类和属性。这是角度的主要思想 - 基于数据绑定的渲染视图。组件的代码不应该过多关注视图结构。

因此，在这种情况下，如果您的类应该基于一些外部信息，您需要@Import（）通过数据绑定到您的组件中的数据，然后使用ngClass指令中的组件属性。是的，它将逻辑移动到组件而不是html / css中，但这应该是它应该在的位置：在模型/控制器代码中，而不是在视图标记中。此外，这样测试这样的组件会更方便。