Angular + SCSS：如何在父组件上应用样式：悬停

Question

我正在尝试在其父组件悬停时显示我的组件。

当元素悬停时，action-list 组件将显示可能的操作列表。目标是有一种上下文动作。

我正在使用host-context 来检测父对象何时悬停，但问题是它将通过父树。 如果我有以下内容：:host-context(:hover) {...} action-list 将在其任何祖先（直到身体）悬停时显示。在这种情况下，它将始终显示为Demo

我设法通过在父级和 scss 中设置一个 css 类来使其工作 :host-context(.parent:hover) {...}` Demo

它运行良好，但我想避免在父级上设置额外的类。

问题：

我知道这在纯 CSS 中是不可能的，但是否有一个 angular/scss 魔术语法允许选择直接父级？

类似:host-context(parent():hover) {...}

Answer 1

这里有两个解决方案：

• 在父组件中：

.parent-component:hover ::ng-deep app-child-component .div-in-child {}

• 在子组件中

:host-context(app-parent-component:hover) .child-component-div {}

::ng-deep 让您可以通过子组件树强制向下进入所有子组件视图。