Как правильно работать с ивентом scroll в Angular4/5?

Question

[whiteleaf]

Подскажите, поджалуйста, как выглядит работа с ивентами в Angular?
Как я могу получить информацию в компоненте на сколько страница проскролина относительно верха страницы?

Буду очень признателен за помощь, а то ни как не могу найти эту информацию в сети.
Есть вариант через декоратор listenhost, но я не совсем разобрался как оно работает. Не получилось получить информацию о скролинге.

Answer 1

[Василий Мажекин]

Нигде нет инфы (нет ангулярной реализации), потому что с глобальными ивентами можно работать, как на голом яваскрипте или (jQuery в помощь)
пример скроллинга всего документа

document.on('mousewheel DOMMouseScroll scroll', (event) => {
      const docHeight = document.height;
      const height = window.height;
      const offsetY = Math.round(window.scrollTop());
      // todo
});

Создайте обычный сервис ангуляра и там вызовите этот код.

[Injectable]
class ScrollService {
     public onScroll$ = new Subject();
     constructor() {
        document.on('mousewheel DOMMouseScroll scroll', (event) => {
             // bla bla
             this.onScroll$.next({тут нужные цифры скрола});
        })
     }
}

и в любом компоненте или директиве подпишитесь на событие
scrollService: ScrollService

scrollService.onScroll$.subscribe((тут цифры скрола) => { console.log('меня скроллят') })

Comments

[Василий Мажекин]

MaxKorz, Предложенный метод универсален для всего приложения, так как, все завязано на observables. И одна реализация призязка к DOM. Ваше предложение тоже верно но в рамках одного компонента.