1

我正在尝试在我的 Angular 4 应用程序中实现无限滚动。我已遵循https://www.npmjs.com/package/ngx-infinite-scroll的所有指示

在文件中它说：

默认情况下，该指令监听窗口滚动事件并调用回调。 要在实际元素滚动时触发回调，应配置以下设置：

  • [滚动窗口]="假"
  • 为元素设置一个明确的 css“高度”值

但在我的情况下，不会触发默认的窗口滚动事件。相反，如果我为 div 元素设置高度并设置 [scrollWindow] = "false"，那么它在这种情况下有效。我不知道我错过了什么。

给定文档导入中的示例

{ platformBrowserDynamic } from '@angular/platform-browser-dynamic';

但我没有在我的模块中导入它。是不是导致这个问题。我认为这不是原因。

任何帮助将不胜感激。谢谢。

4

1 回答 1

3

您无需安装额外的软件包即可实现无限滚动功能。下面的例子对我有用。

app.component.ts

export class AppComponent
{
    stones: Array<any>
    margin: number = 10;

    constructor() {

        this.stones = new Array<Object>();
        this.populate(this.margin);
    }

    onScroll(event: any) {

        if (((window.innerHeight + window.scrollY + 1) >= document.body.offsetHeight) || ((window.innerHeight + document.documentElement.scrollTop) >= document.body.offsetHeight)) {
            this.populate(this.margin);
        }
    }

    populate(margin: number): void {

        for (let i = 0; i < margin; i++) {
            this.stones.push(new Object());
        }
    }
}

和你的 app.component.html

<div (window:scroll)="onScroll($event)">
    <div *ngFor="let item of stones">
        <div style="width:100px; height:60px; background-color:green;margin:20px"></div>
    </div>
</div>
于 2018-01-09T18:43:23.707 回答