Реализовать бесконечный скроллер в angular2

Я хотел бы реализовать бесконечную прокрутку для * ng-для DIV в компоненте angular2. Для этого мне нужно как-то подключиться к событию onScroll окна через метод angular. Затем в angular я смогу загрузить больше элементов в массив элементов данных, когда пользователь прокрутил прохождение некоторой точки страницы.

У каждого есть идеи, как подключиться к событию window.scroll из angular (внутри компонента ng2)?

Ответы

Ответ 1

Используйте нотацию (target:event)="handler()" для прослушивания глобальных событий. Вы можете использовать window, document или body в качестве цели. Для вашего случая это будет (window:scroll)="onScroll($event)". См. эту панель.

import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  template: `
    <div (window:scroll)="onScroll($event)">
      <h1>Hello Angular2</h1>
      ...
    </div>
  `,
})
export class App {

  onScroll(event) {
    console.log('scroll event', event);
  }
}

Ответ 2

Вы можете использовать @HostListener для обнаружения прокрутки. Вот как я это сделал

 export class AppComponent {

  @HostListener('window:scroll', ['$event'])
    onScroll($event: Event): void {
    console.log("On Scroll");
    //Logic To Check whether we are bottom of the page
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
      console.log("On Scroll Down");
      //Write logic here for loading new content.
    }
  }

}

Надеюсь, это поможет вам:)

Ответ 3

component.html

<div (scroll)="onScroll($event)">
    //Content
</div>

Теперь я просто использовал свойства $event.target scrollTopMax и scrollTop:

component.ts

onScroll(event: any): void {
   let elementHeight = event.target.scrollTopMax;
   let scrollPosition = event.target.scrollTop;
   if( elementHeight - scrollPosition < 100) {
       //add Content
   }
}

Конечно, вам понадобится проверка функции, если новый контент уже отображен. Если функция onScroll() не будет вызвана слишком часто.

В моем случае я вставляю другой компонент с *ngFor и создаем и @Output, чтобы уведомить родителя о готовом рендеринге.

child.component.ts

@Output()
rendered = new EventEmitter();

ngAfterViewChecked() {
    this.rendered.emit(<uniqueIdentifier>);
}

component.html

<div (scroll)="onScroll($event)">
    <child *ngFor="element in displayedElement"
        (rendered)="elementRendered($event)">
    </child>

component.ts

elements: any;
displayedElements: any[];
renderedElements: new Set();

addElements(): void {
    /////
}

elementRendered(<uniqueIdentifier>: any) {
    this.renderedElements.add(<uniqueIdentifier>);
}

onScroll(event: any): void {
    if( this.displayedElements.length == this.renderedElements.size) {
        let elementHeight = event.target.scrollTopMax;
        let scrollPosition = event.target.scrollTop;
        if( elementHeight - scrollPosition < 100) {
            this.addElements();
        }
    }
}