Angular2：如何实现滚动分页来显示数据答案

【问题标题】：Angular2: How to implement Scroll Pagination to display dataAngular2：如何实现滚动分页来显示数据
【发布时间】：2017-10-14 18:35:13
【问题描述】：

我是 Angular2 的新手，基本上想实现滚动分页，以便当用户向下滚动时数据会出现。

我有三个组件 App.Component、Categories.Component 和 Products.Component。

基本上我想在 Pagination 中展示产品。这是 Products.Component 的代码

@Component({
selector: 'products',
template: `<div class="products-wrapper grid-4 products clearfix loading">
            <div *ngFor="#product of products"  (click)="getProduct(product)" class="product">
                <div class="product-inner" style="background:url({{product.pictureUrl}})">
                    <div class="time-left">
                        <span class="text">Hourly Deal</span>
                        <ul class="countdown clearfix">
                            <li> 
                                <div class="text">
                                    <span class="hours">00</span>
                                </div>
                            </li>

                            <li> 
                                <div class="text">
                                    <span class="minutes">00</span>
                                </div>
                            </li>
                            <li> 
                                <div class="text">
                                    <span class="seconds">00</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <span class="discount-tag">{{product.discount}}%</span>

                </div>
            </div>
            </div>`,
            providers :[CategoryService]

})
@Injectable()
export class ProductsComponent {
private product:ProductModel;
private products: ProductModel[] = [];
constructor(private _categoryService : CategoryService)
{
    this._categoryService.getProducts(0)
    .subscribe(
        a=>{
            this.products = a;
        }
    );
}
getProduct(product:ProductModel)
{
    alert(product.productId);
    this.product = product;
}
populateProducts(products: ProductModel[] = [])
{
    this.products = products;
}


}

我想在滚动到页面底部时显示产品的分页。

请帮帮我谢谢。

【问题讨论】：

标签： typescript angular pagination

【解决方案1】：

import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  template: `
    <div (window:scroll)="onScrollFunction($event)">
      <h1>Hello Angular2</h1>
      <div class="" *ngFor="let row of array">

</div>
    </div>
  `,
})
export class App {

  onScrollFunction(event) {
    console.log('scroll event', event);
  }
}

【讨论】：