Angular4中的onScroll事件触发函数
onScroll event triggers function in Angular4
我想显示一个分页列表,因此,当用户向下滚动时,我想触发一个加载更多项目的功能。但是我无法在 'scroll' 事件上调用该函数。
这是我的 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.Modify 时给出了不同的函数名称
@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>
请检查插件 here。希望对您有所帮助。
上面的代码会在页面滚动和div滚动时触发滚动功能。如果你只想要div滚动事件,请使用下面的代码
@HostListener('scroll', ['$event'])
scrollHandler(event) {
console.debug("Scroll Event");
}
这只会在 div 是 scrolled.Find 笨蛋 here
时触发
我想显示一个分页列表,因此,当用户向下滚动时,我想触发一个加载更多项目的功能。但是我无法在 'scroll' 事件上调用该函数。
这是我的 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.Modify 时给出了不同的函数名称@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>
请检查插件 here。希望对您有所帮助。
上面的代码会在页面滚动和div滚动时触发滚动功能。如果你只想要div滚动事件,请使用下面的代码
@HostListener('scroll', ['$event'])
scrollHandler(event) {
console.debug("Scroll Event");
}
这只会在 div 是 scrolled.Find 笨蛋 here
时触发