Angular 4:无限滚动默认行为不起作用

Question

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

的所有指示

在文档中说：

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

• [scrollwindow] =" false"
• 将CSS"高度"值设置为元素

但是，在我的情况下，没有触发默认窗口滚动事件。相反，如果我为DIV元素设置高度并设置[scrollwindow] =" false"，则在这种情况下可以工作。我不知道我想念什么。

给定文档导入的示例

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

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

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

Answer 1

您可以在不安装额外软件包的情况下实现无限的滚动功能。以下示例对我有用。

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>