Как в Anuglar взять DOM элемент по событию?

Question

[Drovosek01]

Есть такой метод в компоненте проекта на Angular 11, который прослушивает нажатия клавиш на клавиатуре

@HostListener('document:keydown', ['$event'])
  public someMethod(event: KeyboardEvent) {
    console.log('event', event);
  }

Если я воспользуюсь свойством event.target, то получу поле типа EventTarget у которого нет никаких свойств и есть только 3 метода для работы с событиями.

Собственно как мне получить элемент типа NodeList или HTMLColletion или что-то типо того?
Если вывести в консоль сам event, то там будет стандартная структура DOM компонента, но как ею воспользоваться из кода компонента не могу понять.

Comments

[Sun_Day]

Скриншот что выводит console.log в студию.

Ну и вообще для какой цели нужно получать элементы от события клавиатуры? Так делать не стоит.

[Drovosek01]

Sun_Day, чтобы при переходе по элементам с помощью Tab, зациклить переходы в определенной области.

[Drovosek01]

Sun_Day, вот тут есть пример - https://habr.com/ru/post/469749/

Answer 1

[Антон Швец]

Если я воспользуюсь свойством event.target, то получу поле типа EventTarget у которого нет никаких свойств

Правильно, потому что это универсальный тип, который не может знать откуда вы этот эвент получили. Источником евента является объект, имплементирующий интерфейс EventTarget, и большего эвенту и не надо.
Надо просто прописать явно что именно получаете.

@HostListener('document:keydown', ['$event', '$event.target'])
  public someMethod(event: KeyboardEvent, target: HTMLElement) {
    console.log('event', event, target);
  }

Comments

[Drovosek01]

Спасибо!
А не подскажите, как event.target привести к типу HTMLElement, если он не передается отдельным аргументом?

Я пробовал стандартную конструкцию
(HTMLElement)event.target;
Но VSCode ругается на слово event, говорит, что ожидается ";"

В итоге приходится использовать вот такую некрасивую конструкцию, с посредником в виде типа unknown:

let targetElement = (event.target as unknown) as HTMLElement;

[Антон Швец]

Drovosek01, да вроде можно просто(event.target as HTMLElement)

Answer 2

[Андрей Саныч]

constructor(private el: ElementRef) { }

Потом используйте как this.el.nativeElement

Comments

[Drovosek01]

А какие у nativeElement свойства и методы? Мне VSCode ничего не автодополняет, если я ваш пример использую.

[Андрей Саныч]

Drovosek01, попробуйте так

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

[Drovosek01]

Андрей Саныч, да, так работает, спасибо.