Angular 17：父组件hover时如何样式化子组件？

在Angular 17的跨组件场景下，想要实现父组件被hover时样式化子组件的效果，但在父组件CSS中编写以下代码完全无效：

parent:hover .child {
  padding: 0px
}

想请教几个问题：

• 是否需要使用已被弃用的:host ng::deep？
• 有没有更优的方式在父组件hover时传递样式给子组件？
• 能否在父组件hover时向子组件传递Input参数？

目前验证可行的较优方案是通过创建本地模板变量实现，尽管大语言模型不推荐用*ngIf这种方式创建本地模板变量，但实际使用中是有效的：

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

逻辑说明 #

1. 利用*ngIf的特性创建一个包含active状态的本地对象$，初始值为false
2. 通过mouseenter和mouseleave事件切换$.active的布尔值
3. 将$.active作为Input参数传递给子组件<app-child>，子组件内部可根据active状态编写对应的样式逻辑

内容的提问来源于stack exchange，提问作者Sachin