如何在 ngClass 条件下使用 :host-context 选择器？

Question

我想在 div（组件的一部分）上设置 class active 如果变量为真（此处为 workspace.active）和祖先元素有 class .home。类似于：

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

我可以在 ngClass 的条件表达式中以某种方式使用这个伪选择器 :host-context 吗？

详情：

我想在两个用例中使用相同的组件。在这两种情况下，只有一些 css 属性应该不同。所以我想根据决定在我的组件上的 div 上自定义 css class 集："there is an ancestor home in the dom tree or not" - 这应该区分两个用例。

我可以在 css 中做这样的事情：

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

但是所有包含 .active class 的选择器组合也应该与 :host-context 组合，我不想增加 css 的复杂性已经很复杂了。我更愿意根据条件设置 class .active 。在 css 文件中！，而不是在代码中。（这就是:host-context最终存在的原因。）

Answer 1

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

因此，在这种情况下，如果您的 class 应该基于一些外部信息，您需要通过数据绑定将数据 @Import() 到您的组件中，然后在 ngClass 指令中使用组件属性。是的，它将逻辑移动到组件中而不是 html/css，但这无论如何都是应该的：在 model/controller 代码中，而不是在视图标记中。还有这样的组件测试起来会方便很多

如何在 ngClass 条件下使用 :host-context 选择器？

How to use :host-context selector in an ngClass condition?

css

angular

ng-class