Question

我想在angular2组件中实现D ng的* ng-for无限滚动。为此，我需要通过角度方法以某种方式挂钩窗口onScroll事件。然后在角度我将能够在用户滚动通过页面的某个点时将更多项目加载到数据项数组中。

任何人都有想法如何从angular（在ng2组件内）挂钩window.scroll事件？

Answer 1

使用(target:event)="handler()"表示法来收听全局事件。您可以使用window，document或body作为目标。对于您的情况，它将是(window:scroll)="onScroll($event)"。请参阅this plunk。

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);
  }
}

Answer 2

您可以使用@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.
    }
  }

}

希望这会对你有所帮助:)。

Answer 3

component.html

scrollTopMax

现在我只使用$ event.target属性scrollTop和onScroll(event: any): void { let elementHeight = event.target.scrollTopMax; let scrollPosition = event.target.scrollTop; if( elementHeight - scrollPosition < 100) { //add Content } }：

component.ts

onScroll()

当然，如果已经呈现了新内容，您将需要一些功能检查。如果不是，则会经常调用*ngFor函数。

在我的情况下，我插入了@Output的其他组件并创建了@Output() rendered = new EventEmitter(); ngAfterViewChecked() { this.rendered.emit(<uniqueIdentifier>); }以通知父级已完成的渲染。

child.component.ts

<div (scroll)="onScroll($event)">
    <child *ngFor="element in displayedElement"
        (rendered)="elementRendered($event)">
    </child>

component.html

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();
        }
    }
}

component.ts

pages

在angular2中实现无限滚动

3 个答案: