Angular 2：滚动事件未触发

Question

我是 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 调用。帮帮我，怎么办？

Answer 1

我刚刚遇到这个问题，正在寻找一种方法来告诉 Angular 我希望滚动 (wheel) 事件是被动的（目前还不可能 - #8866）。但您问题的关键词是wheel。

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

这里是：

没有scrolled 事件。

至于scroll 事件：它不能简单地委托给任何元素。您可以将其附加到 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。

Answer 2

我之前也遇到过同样的问题，解决方案是使用主机侦听器装饰器创建指令。

@HostListener('scroll', ['$event']) public scrolled($event: Event) {
    this.elementScrollEvent($event);
}

对于窗口事件

@HostListener('window:scroll', ['$event']) public 
    windowScrolled($event: Event) {
    this.windowScrollEvent($event);
}

无论如何，我还发布了一个 NPM 模块来检测滚动事件并确定用户是否正在接近元素底部以加载下一页。

检查https://www.npmjs.com/package/ngx-scroll-event

Answer 3

mousewheel 事件将处理滚动。

HTML

<div style="height:1000px" (mousewheel)="mousewheel($event)">

</div>

打字稿

mousewheel(event){
    console.log(event)
  }

您也可以创建自定义指令并对其进行处理，

 @HostListener('mousewheel', ['$event']) onMousewheel(event) {
           do something
 }

LIVE DEMO

Answer 4

没有scrolled 事件。

我认为应该是

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

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