如何直接在模板中獲取組件的元素引用？

Question

我將某些元素設置為使用鼠標懸停，如下所示：

<div #divTemplateVar (mouseover)="divTemplateVar.focus()"></div>

雖然這似乎不適用於組件：

<component #componentTemplateVar (mouseover)="componentTemplateVar.focus()"></component>

我知道我可以使用

viewChild('componentTemplateVar', { read: ElementRef }) 

選擇模板中的組件，但我有很多組件只需要專注於鼠標懸停，不想手動編寫視圖子項並將它們的 id 與鼠標懸停功能匹配。

如何讓組件子級自動將注意力集中在鼠標懸停事件上？

Answer 1

制定指令： stackblitz

export class HoverFocusDirective {

  constructor(
    private el: ElementRef<HTMLElement>
  ) { }

  @HostListener('mouseover')
  onMouseOver() {
    this.el.nativeElement.focus();
  }

  @HostListener('mouseout')
  onMouseOut() {
    this.el.nativeElement.blur();
  }

}