角度2：滚动事件未触发

Question

我是Angular 2的新手，正在尝试使用scroll事件进行rest调用。我有200条记录，最初我会像这样打个电话

localhost:8080/myapp/records=items&offset=0&limit=50

它将首先获取50条记录。但是，当我向下滚动时，它必须进行另一个API调用来获取另外50条记录，例如

localhost:8080/myapp/records=items&offset=50&limit=50

我尝试了此操作，但未触发事件。

的HTML

    <div>
    <table class="doc-table" (scrolled)="onScroll($event.value)">
        <thead>
            <th class="avatar-th"></th>
            <th>Id</th>
            <th>Name</th>
            <th>Price</th>
        </thead>
        <tbody>
            <tr *ngFor="let item of items" (click)="routeTo(item.id)">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
            </tr>
        </tbody>
    </table>
   </div>

脚本

 @Component({
  selector: 'item-cmp',
  templateUrl: 'items.component.html'
})
export class PatientsComponent(){
  onScroll(event:any){
    alert("Scolled...");
  }
}

基于偏移量，我必须进行API调用。帮帮我，该怎么做？

Answer 1

我只是碰到了这一点，正在寻找一种方法来告诉Angular我希望滚动（wheel）事件是被动的（尚不可能- ＃8866）。但是这里您要提问的关键词是滚轮。

这是一个很老的问题，可能您已经解决了，但是没有答案发布，因此遇到相同问题的人将无法获得答案。

这里是：

没有scrolled活动

至于scroll事件：它不能简单地仅委托给任何元素。你可以将它连接到window或document，但不是你的div。

您正在寻找的wheel事件是：

<div (wheel)="onMouseWheel($event)"></div>

然后，您可以简单地检查事件在您的组件中提供了什么：

onMouseWheel(evt) {
    console.log('Wheel event: ', evt);
}

因此，您知道该使用什么...例如，滚动“距离”，可以从evt.deltaX，知道方向evt.deltaY。如果deltaX为正，则向右水平滚动（在X轴上）。如果为负，则您已滚动到左侧。你明白了。

PS并且不用担心，即使它被称为wheel，使用触摸板时也会触发。我可能应该简单地命名我的方法onWheel。

PPS我看到另一个答案，提示mousewheel。mousewheel从来都不是标准，并且已弃用-MDN链接

我建议使用wheel。

Answer 2

没有scrolled事件。

我认为应该是

<table class="doc-table" (scroll)="onScroll($event)">

除非scrolled是您的一些自定义事件。