Angular2: So implementieren Sie Scroll Pagination zur Anzeige von Daten

Question

Ich bin neu in Angular2 und möchte Scroll Pagination implementieren, so dass die Daten kommen, wenn der Benutzer nach unten scrollen.

Ich habe drei Komponenten App.Component, Categories.Component und Products.Component.

Grundsätzlich möchte ich Produkte in Paginierung anzeigen. Hier ist der Code of 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; 
} 


} 

Ich möchte Paginierung von Produkten angezeigt wird, wenn der Boden des Scroll-Lauf der Seite.

Bitte helfen Sie mir Danke.

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