css - 如何使用:host-context selector in an ngClass condition?

Question

如果变量为真(此处为workspace.active)并且祖先元素具有类，我想在 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 组合，我不想增加 css 的复杂性，因为它是已经很复杂了。我更愿意根据条件设置类 .active 。在 css 文件中!，而不是在代码中。 (这就是 :host-context 最后存在的原因。)

Answer 1

在 Angular 中，您不应根据 html 内容属性(例如类或属性)在代码中做出任何逻辑决定，反之亦然 - 您应该根据数据绑定(bind)在 html 中呈现类和属性。这就是基于数据绑定(bind)的 Angular 渲染 View 的主要思想。组件的代码不应该太在意 View 结构。

因此，在这种情况下，如果您的类应该基于一些外部信息，您需要通过数据绑定(bind)将数据 @Import() 到您的组件中，然后在 ngClass 指令中使用组件属性。是的，它将逻辑移动到组件中而不是 html/css，但这就是它应该在的地方:在模型/ Controller 代码中，而不是在 View 标记中。此外，通过这种方式测试此类组件会更加方便。