javascript - Angular 2 : scroll event not firing

我是 Angular 2 的新手。尝试使用滚动事件进行休息调用。我有 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 调用。帮帮我，这个怎么办？

最佳答案

我刚刚遇到了这个，正在寻找一种方法来告诉 Angular 我希望滚动( wheel )事件是被动的(尚不可能 - #8866 )。但这里的关键词是 wheel 。

这是一个很老的问题，可能你已经解决了，但是没有发布答案，所以遇到这个问题的人，遇到同样的问题，不会得到他们的答案。

这里是:

没有 scrolled 事件。

至于 scroll 事件:它不能简单地委托(delegate)给任何元素。您可以将其附加到 window 或 document ，但 而不是 到您的 div 。

您正在寻找的是 wheel 事件:

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

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

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

所以你知道使用什么......例如“距离”滚动，方向可以从 evt.deltaX ， evt.deltaY 知道。如果 deltaX 为正，则您已水平(在 X 轴上)向右滚动。如果它是负数，那么你已经向左滚动。你明白了。

P.S. 别担心，即使它被称为 wheel ，它也会在使用触摸板时触发。我可能应该简单地将我的方法命名为 onWheel 。

P.P.S. 我看到另一个答案，建议使用 mousewheel 。 mousewheel 从来都不是标准的，已被弃用 - MDN link

我建议使用 wheel 。

关于javascript - Angular 2 : scroll event not firing，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39743915/