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