如果变量为真（此处workspace.active），并且祖先元素具有类.home，我想在div（组件的一部分）上设置类active。像这样：
<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 和 I 结合使用 我不想增加 css 的复杂性，因为它已经很复杂了。我宁愿根据条件设置类.active。在 css 文件中 ！，而不是在代码中。（这就是为什么:host-context最终存在的原因。
在 angular 中，您不应根据 html 内容属性（如类或属性）在代码中做出任何逻辑决策，反之亦然 - 您应该基于数据绑定在 HTML 中呈现类和属性。这是基于数据绑定的角度渲染视图的主要思想。组件的代码不应该太关心视图结构。
因此，在这种情况下，如果您的类应该基于一些外部信息，则需要通过数据绑定将这些数据@Import（）到组件中，然后在 ngClass 指令中使用组件属性。是的，它将逻辑移动到组件而不是html/css中，但无论如何，这就是它应该在的地方：在模型/控制器代码中，而不是在视图标记中。此外，这样测试这样的组件会方便得多。