css Angular -在父组件上悬停样式化子组件

e5njpo68 于 11个月前发布在 Angular

关注(0)|答案(3)|浏览(173)

在Angular 17中，当你将鼠标悬停在父组件上，跨越组件边界时，你如何设置子组件的样式？
这样做，在父CSS不工作的孩子：

parent:hover .child {
  padding: 0px
}

字符串
我是否需要使用：用途：host ng：：deep，即使它已经被弃用了？是否有更好的方法，当父组件被悬停在上面时，将样式从父组件传递到子组件？
当鼠标悬停在父对象上时，是否有一种方法可以将Input传递给子对象？
先谢了，
St

更新-解决方案：

这似乎是迄今为止创建本地模板变量的最佳解决方案-尽管我使用过的所有LLM都不建议以这种方式使用 *ngIf（创建本地模板变量）-但无论他们说什么，解决方案确实有效！

<div *ngIf="{ active: false } as $" (mouseenter)="$.active = true" (mouseleave)="$.active = false"><app-child [active]="$.active" /></div>

型

css

来源：https://stackoverflow.com/questions/77719514/angular-styling-child-component-on-parent-component-hover

3条答案

按热度按时间

enxuqcxy1#

你有几个选择：
1.在父组件（docs）中添加encapsulation: ViewEncapsulation.None。
1.在子组件中使用:host-context(.parent:hover) .child选择器（文档）。
1.在父组件中使用.parent:hover ::ng-deep .child选择器。是的，它已经过时了，但它仍然被广泛使用。
1.使用额外的变量。可能对复杂的情况有用。

<div (mouseenter)="active = true" (mouseleave)="active = false">
  <app-child [active]="active" />
</div>

字符串

赞(0）回复(0）举报 11个月前

toe950272#

您可以尝试使用HostBytes https://angular.io/api/core/HostListener
要复制悬停效果，请使用mouseenter和mouseleave事件

@HostListener('mouseenter') onHover() {
    // trigger child styling
}

字符串

赞(0）回复(0）举报 11个月前

sc4hvdpw3#

由于需求很简单，您可以将样式添加到global_styles.css中，为每个组件添加一个特殊的类，以便CSS不会混淆其他组件。
global_styles.css

app-parent-component .parent:hover app-child-component .child {
  padding: 0px
}

字符串
这里app-parent-component和app-child-component是angular中的组件选择器，这将确保CSS在正确的级别上应用！

赞(0）回复(0）举报 11个月前

我来回答

css Angular -在父组件上悬停样式化子组件

3条答案

相关问题

热门标签

最新问答