Приставка "document:" в контексте прослушивания событий в Angular означает, что событие будет привязано к глобальному объекту Document
. Document
- это DOM-объект, представляющий весь HTML-документ, загруженный в текущем окне или фрейме. В Angular мы можем использовать приставку "document:" для прослушивания событий, таких как клик мыши, нажатие клавиш и других, которые происходят внутри document
.
Для прослушки событий можно использовать декоратор @HostListener
, который позволяет реагировать на события, происходящие с элементами DOM. Используя приставку "document:" перед именем события в декораторе @HostListener
, мы указываем, что событие должно быть привязано к объекту Document
.
Вот пример использования декоратора @HostListener
для прослушивания события клика мыши внутри объекта Document
:
import { Component, HostListener } from '@angular/core'; @Component({ selector: 'app-my-component', template: `<p>Click anywhere in the document!</p>`, }) export class MyComponent { @HostListener('document:click', ['$event']) onClick(event: Event) { console.log('Document clicked!', event); } }
В данном примере, когда пользователь кликает в любом месте документа, будет вызван метод onClick
компонента MyComponent
, и в консоль будет выведено сообщение "Document clicked!", а также объект события Event
.
Более подробно про приставку "document:" и прослушивание событий в Angular можно почитать в официальной документации Angular:
- Документация по приставке "document:": https://angular.io/api/core/HostListener#using-a-global-event-listener
- Документация по прослушиванию событий в Angular: https://angular.io/guide/user-input