Angular2：如何實現滾動分頁顯示數據

Question

我是Angular2的新手，基本上希望實現滾動分頁，以便在用戶向下滾動時顯示數據。

我有三個組件App.Component，Categories.Component和Products.Component。

基本上我想要在分頁顯示產品。 這裏是我想要顯示的產品分頁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; 
} 


} 

的代碼時，頁面滾動的到達底部。

請幫我出來 謝謝。

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