以角度2实现无限滚动答案

【问题标题】：implement infinite scroller in angular2以角度2实现无限滚动
【发布时间】：2016-04-02 11:29:59
【问题描述】：

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

有人知道如何从 Angular（在 ng2 组件内部）挂钩到 window.scroll 事件吗？

【问题讨论】：

(scroll)="update($event)" 在模板中您想要获取滚动通知的元素上应该做您想做的事，不是吗？
尝试了以下方法，但不起作用

onScroll(ev) 函数根本不会在组件上被调用。

【解决方案1】：

component.html

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

现在我只使用了 $event.target 属性scrollTopMax 和scrollTop：

组件.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>

组件.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();
        }
    }
}

【讨论】：

【解决方案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】：

使用(target:event)="handler()" 表示法来监听全局事件。您可以使用window、document 或body 作为目标。对于您的情况，它将是(window:scroll)="onScroll($event)"。见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);
  }
}

【讨论】：

这确实有效，但是您如何获得滚动的数量。 event.scrollY == 57 有点像？
@LukeDupin 试试window.scrollY。这对我有用。
在我的情况下不起作用。我将其应用于我的应用程序中的一个 div，该 div 内置于 ng2-material 设计中。问题是 (window:scroll) 在我的情况下不会触发@alexpods
我是新的角度，我不明白，任何人都可以帮我实现这个吗？