angular2延迟加载或滚动分页

Question

如何创建真正的延迟加载？接下来是问题：我在滚动条上创建了延迟加载。我在滚动触发事件上使用无限滚动，我得到下一页并与第 1 页上的数组连接。但我认为这不是真的，因为我增加了阵列。请帮助如何在不增加数组的情况下创建延迟加载？

onScroll() {
    var inOrOut = this.selectedType.inOrOut == 'incoming' ? 1 : 0;
    if(this.selectedType.page.page !== false) {
        this.selectedType.page.page = this.selectedType.page.page + 1;
        this.getMessagesForPage();
    }
}

getMessagesForPage() {
    var self = this;

    this.messageSmsService
        .getMessagesForPage(this.page)
        .subscribe(
            result => {
                self.allData[ self.selectedType.type].push(result);
            },
            error => {...})
}

Answer 1

有virtual-scroll个。它不是浏览器 (windows) 滚动。根本区别在于根据要求重写 html。通常滚动绘制所有html，以及虚拟滚动可见部分。

在模板中添加。

 <virtual-scroller 
            [items]="buffer"
            (vsUpdate)="scrollItems = $event"
            (vsEnd)="getMessagesForPage($event)">

            <div *ngFor="let item of scrollItems"> </div>

 </virtual-scroller>

vsEnd - 是我们达到 "underwold".

时的事件

和 getMessagesForPage 已更改为

public getMessagesForPage(event: ChangeEvent) {
  if (event.end !== this.buffer.length-1) return;

  this.getData(this.buffer.length, 10)
      .subscribe(
         result => this.buffer = this.buffer.concat(result)
       )
    }

我正在添加缓冲区元素，但我没有将所有 html 绘制到滚动条中

angular2延迟加载或滚动分页

angular2 lazy loading or pagination on scroll

lazy-loading

angular