我正试图显示一个分页列表,因此,当用户向下滚动时,我想触发一个函数来加载更多的项目。但我无法在“滚动”事件上调用该函数。
这是我的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 );
}
你能帮我解决这个问题吗?谢谢!:)