当前位置:  开发笔记 > 编程语言 > 正文

在angular2中实现无限滚动

如何解决《在angular2中实现无限滚动》经验,为你挑选了2个好方法。

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

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



1> alexpods..:

使用(target:event)="handler()"符号来收听全局事件.您可以使用window,documentbody作为目标.对于你的情况,它将是(window:scroll)="onScroll($event)".看到这个插件.

import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  template: `
    

Hello Angular2

...
`, }) 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.
    }
  }

}

希望对你有帮助 :)

推荐阅读
低调pasta_730
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有