在angular2中实现无限滚动

Question

我想在angular2组件中为*ng-for DIV实现无限滚动.为此,我需要以某种方式通过角度方法挂钩窗口onScroll事件.然后在角度我将能够在用户滚动通过页面的某个点时将更多项目加载到数据项数组中.

任何人都有想法如何从angular(在ng2组件内)挂钩window.scroll事件？

Answer 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);
  }
}

Answer 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.
    }
  }

}

希望对你有帮助 :)