Angular глобальная функция, возвращающая elementId при наведении курсора

Question

В настоящее время я работаю над проектом angular, где мне нужно сделать вики windows. Обычно, когда любой элемент имеет свойство mouseHovered, его определение отображается внутри окна вики. Для этого мне интересно, возможно ли иметь глобальную функцию для каждого htmlElement в приложении, которая будет возвращать их идентификатор при наведении курсора. Было бы намного проще сделать это таким образом, вместо того, чтобы вызывать «ng-mousehover» в каждом элементе файлов шаблонов.

Некоторое время я искал и не нашел ничего, в котором упоминается такая глобальная функция, поэтому мне нужна ваша помощь чтобы узнать, возможно ли это, и если это возможно, как я могу это написать.

большое спасибо!

Answer 1

Вы можете использовать директиву, используя в качестве селектора любой элемент из html

Представьте, что у вас есть служба

export class MouseService {

  private subject:Subject<any>=new Subject()
  observableID:Observable<any>=this.subject as Observable<any>
  constructor() { }
  message(id:string)
  {
    this.subject.next(id)
  }

}

У вас может быть такая директива, как, см. «Селектор»

@Directive({
  selector: 'a,div,span,input,p',
  exportAs: 'child'
})
export class MouseHoverDirective {
  @HostListener('mouseover', ['$event.target'])
  onHover()
  {
    const id=this.el.nativeElement.getAttribute('id')
    if (id)
      this.mouseService.message(id)
  }
  constructor(private el:ElementRef,private mouseService:MouseService){}
}

Каждый раз, когда вы наводите указатель мыши на ссылку, диапазон, ввод, парраграф или div, у которых есть вызов id для mouseService.message. Таким образом, если вы подписываетесь на компонент, у вас есть «id»

this.mouseService.observableID.subscribe(res=>{
   this.result.push(res)
 })

См. stackblitz

Обновлено проблема в том, что у вас нет id в дочернем элементе, ну, мы можем немного изменить директиву

@HostListener('mouseover', ['$event.target'])
onHover(target)
{
    const id=this.el.nativeElement.getAttribute('id')
    if (id)
      this.mouseService.message(id)
    else
      this.mouseService.message("parent:"+target.parentNode.getAttribute('id'))
}