Question

我是Angular2的新手，基本上想要实现Scroll Pagination，以便在用户向下滚动时数据出现。

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

基本上我想在Pagination中展示产品。这是产品代码。组件

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


}

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

请帮帮我谢谢。

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

Angular2：如何实现Scroll Pagination以显示数据

1 个答案: