Angular 2：滚动事件不会触发

问题描述：

我是Angular 2的新手。尝试使用滚动事件进行其他调用。我有200条记录，最初我会做这样的休息电话Angular 2：滚动事件不会触发

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>

脚本上抵消我必须做出API调用

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

基地。帮助我，如何做到这一点？

答

没有scrolled事件。

我认为它应该是

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

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

感谢您的回复。但是，仍然没有工作。 – NNR

很难从这里知道，也许表格不是发出滚动事件的元素。 –

什么是“不工作”的意思。 '$ event.value'应该做什么。据我所知'event'没有'value'属性。 –

答

我只是碰到这种进来，寻找一种方式来告诉角度，我想滚动（轮）事件是被动的（不可能的，但 - #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轴上）向右。如果它是负面的，那么你已经滚动到左边。你明白了。

P.S.即使叫做wheel，也不用担心，使用触控板时也会触发。我可能应该简单地命名我的方法onWheel。

P.P.S.我看到另一个答案，建议mousewheel。 mousewheel从来没有标准和不赞成 - MDN link

我建议使用wheel。

为什么是负面投票？ :)） – MrCroft

答

mousewheel事件将处理滚动。

HTML

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

</div>

打字稿

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

您可以创建自定义指令和处理它，以及，

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

LIVE DEMO

答

我以前遇到同样的问题，解决方案是使用主监听器装饰器创建指令。

@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

@NNR请让我知道，如果这个答案在你身上很好。 –

Angular 2：滚动事件不会触发

相关推荐