Как транслировать события HostListener с помощью RxJs?
Я нахожу множество ресурсов о том, как привязать Angular HostListeners:
@HostListener('document:click', ['$event'])
handleClick(event: Event) {
// etc
}
но как мне использовать RxJs вместо этого для потоковой передачи?
documentClickedStream = Observable.fromEvent(/* how to bind this? */)
Не знаю, как выполнить привязку для создания потока «щелкнуть в любом месте» с использованием шаблона декоратора, предложенного в документации по Angular.
Не могли бы вы указать ссылку на документацию по декораторам?
Упс, обновленный вопрос, я действительно имел в виду, как обрабатывать щелчок в любом месте элемента Host с помощью RxJs, а не ngrx. Я печатал слишком быстро.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Используйте шаблон ref, чтобы получить ссылку на кнопку
Это будет работать, поскольку мы ориентируемся на документ.
@ViewChild('btn') btn:ElementRef;
documentClickedStream = Observable.fromEvent(window['document'],'click');
Рабочий пример: https://stackblitz.com/edit/rxjs-window
как мне это сделать без кнопки, т.е. всего HostElement?
Вы хотите вызвать это, если вы нажмете где-нибудь в домене?
Вы проверили документ: щелкните внутри события
Я не уверен, что могу получить доступ к документу напрямую, поскольку это проект Nativescript, но я могу попробовать.
Нет, это сработает, потому что мы пытаемся выбрать документ
нельзя использовать в Nativescript (нет документа). Can't find variable: document, однако, работает в сети. Вот почему я думаю, что для доступа к HostElement в Angular требуется прохождение декоратора.
Думаю, самый простой способ - просто использовать промежуточную тему:
@HostListener('document:click', ['$event'])
onKeyUp(e:Event) {
this.clickStream$.next(e);
}
затем подпишитесь на него как обычно
this.clickStream$
.asObservable()
.pipe(
// some operators...
)
.subscribe();
Вы также можете подписаться на события RxJs, используя приведенный ниже код, добавив приведенный ниже код к событию ngOnInit:
this.subscribe(fromEvent(document, 'visibilitychange'), (e: Event) => {
console.info('visibilitychange');
this.getVisibilitychange(true);
});
Вот мой рабочий пример. Сначала вам нужно импортировать эти строки в свой компонент
import { fromEvent } from 'rxjs/internal/observable/fromEvent';
затем поместите этот код в конструктор компонента или в ngOnInit
fromEvent(document, 'click').subscribe(event => {
console.info(event);
})
Но это нарушит рендеринг ssr. Использование @HostListener безопасно. Чтобы ваш код работал на Angular Universal, вы должны использовать токен внедрения DOCUMENT, чтобы внедрить объект документа из DI и использовать его вместо глобального объекта документа.
чего вы на самом деле пытаетесь достичь? вы хотите, чтобы какой-либо другой компонент в вашем приложении получал уведомление через ngrx всякий раз, когда происходит щелчок по этому компоненту? или же?