实施angular2无限滚动 [英] implement infinite scroller in angular2

问题描述

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

I would like to implement infinite scrolling for an *ng-for of DIVs in angular2 component. For this I need to somehow hook to the window onScroll event via angular method. Then in angular I will be able to load more items into the data items array when user has scrolled pass some point of the page.

任何人有想法如何从角勾到window.scroll事件（NG2组件中）？

Anyone has ideas how to hook to the window.scroll event from angular (inside ng2 component)?

推荐答案

使用（目标：事件）=处理器（）符号收听全球性事件。您可以使用窗口，文件或体作为目标。对于你的情况下，这将是（窗口：滚动）=onScroll（$事件）。请参见这个普拉克。

Use (target:event)="handler()" notation for listening to global events. You can use window, document or body as a target. For your case it will be (window:scroll)="onScroll($event)". See this plunk.

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

这篇关于实施angular2无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！