Html Angular4 中的 onScroll 事件触发函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45977888/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onScroll event triggers function in Angular4
提问by Emanuela Colta
I am trying to display a paginated list, terefore, when the user scrolls down, I want to trigger a function that loads more items. But I cannot call the function on 'scroll' event.
我试图显示一个分页列表，因此，当用户向下滚动时，我想触发一个加载更多项目的函数。但是我无法在“滚动”事件上调用该函数。
This is how my HTML doc looks like:
这是我的 HTML 文档的样子：
<div id="notifications-list" (scroll)="scrollHandler($event)" >
<div class="row notification-row" *ngFor = "let notification of notifications" >
...
</div>
</div>
And in my .ts file, I have the following:
在我的 .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');
}
But it won't work this way. Nothing is displayed in my console.
I tried in many other ways, such as using the @HostListener, but it did't work:
但它不会以这种方式工作。我的控制台中没有显示任何内容。我尝试了许多其他方式，例如使用@HostListener，但它不起作用：
@HostListener('window:scroll', ['$event'])
dotheJob(event) {
console.debug("Scroll Event", window.pageYOffset );
}
Can you help me with this issue? Thank you! :)
你能帮我解决这个问题吗？谢谢！:)
回答by Vikhyath Maiya
You have given a different function name while using @HostListner.Modify your code as
您在使用 @HostListner.Modify 代码时给出了不同的函数名称
@HostListener('window:scroll', ['$event'])
scrollHandler(event) {
console.debug("Scroll Event");
}
and template
和模板
<div id="notifications-list" (scroll)="scrollHandler($event)" >
<div class="row notification-row" *ngFor = "let notification of notifications" >
...
</div>
</div>
Please check the plunk here.Hope it helps.
请检查这里的plunk。希望它有所帮助。
The above code will trigger scroll function both when the page is scrolled as well as the div is scrolled .If you want only div scroll event,please use the following code
上面的代码会在页面滚动和 div 滚动时触发滚动功能。如果你只想要 div 滚动事件，请使用以下代码
@HostListener('scroll', ['$event'])
scrollHandler(event) {
console.debug("Scroll Event");
}
This will be triggered only that div is scrolled.Find the plunk here
这将仅在 div 滚动时触发。在此处查找 plunk
