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..."); 
    } 
}

基地。幫助我，如何做到這一點？

來源

2016-09-28 NNR

沒有scrolled事件。

我認爲它應該是

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

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

來源

2016-09-28 09:53:19

感謝您的回覆。但是，仍然沒有工作。 – 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。

來源

2017-07-02 09:30:44 MrCroft

爲什麼是負面投票？ :)） – 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

來源

2017-07-02 09:39:12 Aravind

我以前遇到同樣的問題，解決方案是使用主監聽器裝飾器創建指令。

@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

來源

2017-08-03 10:41:06

@NNR請讓我知道，如果這個答案在你身上很好。 –

Angular 2：滾動事件不會觸發

回答

相關問題