typescript 在 angular2 中实现无限滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34496508/
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
implement infinite scroller in angular2
提问by Sagi
I would like to implement infinite scrolling for an *ng-for of DIVs in angular2 component. For this I need to somehow hook to the window onScroll event via angular method. Then in angular I will be able to load more items into the data items array when user has scrolled pass some point of the page.
我想在 angular2 组件中为 DIV 的 *ng-for 实现无限滚动。为此，我需要通过 angular 方法以某种方式挂钩窗口 onScroll 事件。然后在 angular 中，当用户滚动通过页面的某个点时，我将能够将更多项目加载到数据项数组中。
Anyone has ideas how to hook to the window.scroll event from angular (inside ng2 component)?
任何人都知道如何从 angular（在 ng2 组件中）挂钩到 window.scroll 事件？
回答by alexpods
Use (target:event)="handler()"notation for listening to global events. You can use window, documentor bodyas a target. For your case it will be (window:scroll)="onScroll($event)". See this plunk.
使用(target:event)="handler()"符号来监听全局事件。您可以使用window,document或body作为目标。对于您的情况，它将是(window:scroll)="onScroll($event)". 看到这个笨蛋。
import {Component} from 'angular2/core'
@Component({
selector: 'my-app',
template: `
<div (window:scroll)="onScroll($event)">
<h1>Hello Angular2</h1>
...
</div>
`,
})
export class App {
onScroll(event) {
console.log('scroll event', event);
}
}
回答by Ashish Sharma
You can use @HostListener to detect Scrolling. This is how I have done this
您可以使用@HostListener 来检测滚动。这就是我这样做的方式
export class AppComponent {
@HostListener('window:scroll', ['$event'])
onScroll($event: Event): void {
console.log("On Scroll");
//Logic To Check whether we are bottom of the page
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
console.log("On Scroll Down");
//Write logic here for loading new content.
}
}
}
Hope this will help you :)
希望能帮到你 ：）
回答by Eiks
component.html
组件.html
<div (scroll)="onScroll($event)">
//Content
</div>
Now i just used the $event.target properties scrollTopMaxand scrollTop:
现在我只使用了 $event.target 属性scrollTopMax和scrollTop：
component.ts
组件.ts
onScroll(event: any): void {
let elementHeight = event.target.scrollTopMax;
let scrollPosition = event.target.scrollTop;
if( elementHeight - scrollPosition < 100) {
//add Content
}
}
Of course you will need some function checking if new content is already rendered.
If not the onScroll()function will be called much too often.
当然，如果新内容已经呈现，您将需要一些功能来检查。如果不是，该onScroll()函数将被过于频繁地调用。
In my case i insert other component with *ngForand created and @Outputto notify the parent about a finished rendering.
在我的情况下，我插入其他组件 *ngFor并创建并@Output通知父级渲染完成。
child.component.ts
子组件.ts
@Output()
rendered = new EventEmitter();
ngAfterViewChecked() {
this.rendered.emit(<uniqueIdentifier>);
}
component.html
组件.html
<div (scroll)="onScroll($event)">
<child *ngFor="element in displayedElement"
(rendered)="elementRendered($event)">
</child>
component.ts
组件.ts
elements: any;
displayedElements: any[];
renderedElements: new Set();
addElements(): void {
/////
}
elementRendered(<uniqueIdentifier>: any) {
this.renderedElements.add(<uniqueIdentifier>);
}
onScroll(event: any): void {
if( this.displayedElements.length == this.renderedElements.size) {
let elementHeight = event.target.scrollTopMax;
let scrollPosition = event.target.scrollTop;
if( elementHeight - scrollPosition < 100) {
this.addElements();
}
}
}
