私は、ページ分割されたリストを表示しようとしています。したがって、ユーザーが下にスクロールすると、より多くのアイテムをロードする機能をトリガーしたいのです。しかし、「スクロール」イベントで関数を呼び出すことはできません。
これが私のHTMLドキュメントの外観です:
<div id="notifications-list" (scroll)="scrollHandler($event)" >
<div class="row notification-row" *ngFor = "let notification of notifications" >
...
</div>
</div>
そして、私の.tsファイルには、次のものがあります。
import { Component, OnInit, ViewChild, ViewEncapsulation, AfterViewChecked, ElementRef, HostListener } from '@angular/core';
@Component({
selector: 'header-component',
templateUrl: 'header.component.html',
styleUrls: ['header.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class HeaderComponent implements OnInit {
constructor( ...){}
scrollHandler(event){
console.log(event);
console.log('now you are scrolling');
}
しかし、この方法では機能しません。コンソールに何も表示されません。 @HostListener
を使用するなど、他の多くの方法で試しましたが、うまくいきませんでした。
@HostListener('window:scroll', ['$event'])
dotheJob(event) {
console.debug("Scroll Event", window.pageYOffset );
}
この問題で私を助けてもらえますか?ありがとうございました! :)
@HostListnerを使用しているときに別の関数名を指定しました。コードを次のように変更します
@HostListener('window:scroll', ['$event'])
scrollHandler(event) {
console.debug("Scroll Event");
}
およびテンプレート
<div id="notifications-list" (scroll)="scrollHandler($event)" >
<div class="row notification-row" *ngFor = "let notification of notifications" >
...
</div>
</div>
プランクを確認してください こちら 。
上記のコードは、ページがスクロールされるときとdivがスクロールされるときの両方でスクロール機能をトリガーします。divscrollイベントのみが必要な場合は、次のコードを使用してください
@HostListener('scroll', ['$event'])
scrollHandler(event) {
console.debug("Scroll Event");
}
これは、divがスクロールされる場合にのみトリガーされます。プランクを見つける here