如何在 Angular 5+ 中使用无限滚动？

Question

我正在按照这个教程操作，但不确定它是否过时。

我使用的是@angular/core": "^5.2.0"，所以我使用的是版本ngx-infinite-scroll@0.8.3。

我添加了以下内容：

import { InfiniteScrollModule } from 'ngx-infinite-scroll';并在app.module.ts中导入了InfiniteScrollModule。

在Search.component.ts中，我将directives: [InfiniteScroll]添加到@Component中，但是当我浏览'ngx-infinite-scroll'的选项时，似乎已经不存在了。 我只能看到InfiniteScrollDirective，但没有实现它。

唯一让应用程序编译的方法是删除directives: [InfiniteScroll]，但是无限滚动功能不起作用（它只是一个普通的滚动）。

Html:

<div class="search-results"
     infiniteScroll
     [infiniteScrollDistance]="2"
     [infiniteScrollThrottle]="50"
     (scrolled)="onScroll()">
  <div *ngFor="let name of ['a','a','b','e','r','t','t','e','b','e','r','t','ererer','a','a','b','e','r','t','t','e','b','e','r','t','ererer']">
    <div>
      {{name}}
    </div>
  </div>
</div>

CSS：

.search-results {
  height: 100px;
  overflow-y: scroll;
}

我的问题是无限滚动是如何实现的？

- Dev

Answer 1

您不需要使用 directives: [InfiniteScroll]，在模块内部导入即可。

关于滚动本身 - 您是否看到了对您定义的函数（onScroll()）的调用？

基本上，该指令会在包含指令的元素的特定百分比（默认为80%）显示在视口中时调用 (scrolled) 函数。

例如，如果您有一个高度为500px的表格，则当其中的400px进入视口（您在屏幕上看到的内容）时，将调用滚动函数。

- Matan Arbel

---

好的，On scrolled正在被调用，里面的在线代码正在记录到控制台。我应该使用这个onScroll函数来向集合中添加更多数据吗？ - Dev

没错。一旦您添加了新项目，就会增加容器的高度 - 这将允许用户再次滚动，并反过来触发onScroll事件（反之亦然）。 - Matan Arbel