将悬停元素存入状态服务Subject后订阅无数据，问题出在哪？

• 核心问题：你的HoverDirective没有接收模板中循环的date值，导致调用nexting()时传递的是undefined，组件订阅自然拿不到有效日期。

• 修复步骤：

  1. 在HoverDirective中添加@Input()装饰器接收日期：

     @Directive({ selector: '[appHover]' })
     export class HoverDirective {
       @Input() date!: Date; // 新增输入属性接收模板中的date
     
       constructor(private dateService: DateService) {}
     
       @HostListener('mouseenter') onMouseEnter() {
         this.dateService.nexting(this.date);
       }
     }
     

  2. 在模板的日期元素上绑定date输入属性：

     <div *ngFor="let date of dates" appHover [date]="date" (click)="onDateClick(date)">
       {{ date | date }}
     </div>
     

• 验证逻辑：
  当鼠标悬停在日期元素上时，指令会通过@Input()拿到当前循环的日期，再调用服务的nexting()方法推送值，组件通过async管道就能正常订阅到悬停的日期了。

另外确认服务的hoveredDateSubject实现正常（当前使用Subject无问题，首次悬停后即可推送有效值），组件的订阅逻辑本身没有错误。

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